/* CX Readiness Assessment (programme selector) — layered on styles.css, which
 * owns the CSS variables and the shared card/button/option kit. Physical
 * left/right is avoided throughout in favour of logical properties, so the
 * Arabic (RTL) rendering is the same stylesheet mirrored, not a second one. */

/* Header lockup — CXM Academy, plus a partner mark on co-branded links. */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup > img { height: 30px; width: auto; display: block; }
.cobrand { display: inline-flex; align-items: center; gap: 10px; }
.cobrand-x { color: var(--ink-soft); font-size: 18px; line-height: 1; }
.cobrand img { height: 26px; width: auto; display: block; }

.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wizard-nav .btn { min-width: 110px; }
.wizard-nav .btn:last-child { margin-inline-start: auto; }
.privacy-line { font-size: 12px; margin: 12px 0 0; }
.privacy-line a { color: var(--ink-soft); }

/* Landing expectation badges: 3-4 minutes · 7 questions · a real report. */
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.badge {
  font-size: 13px; font-weight: 700; color: var(--blue-dark);
  background: var(--blue-pale); border-radius: 99px; padding: 7px 16px;
}

/* Questions */
.opt strong { display: block; font-weight: 400; }
.opt.selected strong { font-weight: 700; }

/* Contact gate */
.gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-block: 18px 6px; }
@media (max-width: 600px) { .gate-grid { grid-template-columns: 1fr; } }
.band-teaser {
  background: var(--blue-pale); border-inline-start: 4px solid var(--blue);
  border-radius: 8px; padding: 12px 16px; font-size: 14.5px; margin-block: 16px 0;
}
.gate-remaining { font-size: 13.5px; font-weight: 700; color: var(--blue); margin: 10px 0 0; }
.error { color: var(--danger); font-size: 13.5px; margin-top: 10px; }

/* Report. The recommendation is the page: it opens the report, it is the
 * biggest thing on it, and everything else explains it. */
.report-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.report-topline .eyebrow { margin-block-end: 0; }
.band-pill {
  background: var(--gold); color: var(--blue-dark); font-family: var(--head); font-weight: 700;
  font-size: 13.5px; border-radius: 99px; padding: 8px 18px; white-space: nowrap;
}
.prepared { font-size: 12.5px; color: var(--ink-soft); margin: 18px 0 0; }
.band-name { font-family: var(--head); font-weight: 700; font-size: 19px; color: var(--blue); margin: 2px 0 8px; }
h3.sub { font-size: 15px; margin: 22px 0 2px; }

.gap-list { list-style: none; padding: 0; margin: 8px 0 0; }
.gap-list li {
  position: relative; padding-inline-start: 30px; margin-block-end: 14px; line-height: 1.62;
}
.gap-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 14px; height: 14px; border-radius: 4px; background: var(--gold-dark);
}

/* The recommendation is the loudest thing on the page: one answer, not four. */
.spotlight { border: 2px solid var(--gold); }
.spotlight h1 { font-size: 32px; margin: 12px 0 2px; }
.spotlight .tagline { font-size: 16px; color: var(--blue); font-weight: 700; margin: 0 0 16px; }
.prog-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink-soft); margin: 16px 0 20px; }
.prog-meta strong { color: var(--blue-dark); }

/* The depth layer: one click away on screen, always open in the PDF. */
.extras > summary {
  cursor: pointer; font-family: var(--head); font-weight: 700; color: var(--blue-dark); font-size: 15px;
}
.extras > summary::marker { color: var(--blue); }
.extras[open] > summary { margin-block-end: 12px; }
.extras h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin: 20px 0 6px; }
.extras p { margin: 0; }
.inside-list { margin: 0; padding-inline-start: 22px; }
.inside-list li { margin-block-end: 7px; line-height: 1.55; }
.answer-list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.answer-list div { border-block-end: 1px solid var(--line); padding-block-end: 7px; }
.answer-list dt { font-size: 12.5px; color: var(--ink-soft); }
.answer-list dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--blue-dark); }

.print-head, .print-url, .print-footer { display: none; }

/* Two-step learning path */
.path { display: flex; align-items: stretch; gap: 14px; margin-top: 14px; }
@media (max-width: 640px) { .path { flex-direction: column; } }
.path-step {
  flex: 1; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--white);
}
.path-step .step-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}
.path-step .step-name { font-family: var(--head); font-weight: 700; font-size: 17px; color: var(--blue-dark); margin: 4px 0 3px; }
.path-step .step-meta { font-size: 13px; color: var(--ink-soft); }
.path-step .step-link { font-size: 13px; font-weight: 700; display: inline-block; margin-top: 9px; color: var(--blue); }
.path-arrow { align-self: center; color: var(--blue); font-size: 22px; font-weight: 700; }
/* The arrow follows the reading direction: it points the other way in Arabic. */
html[dir="rtl"] .path-arrow { transform: scaleX(-1); }
@media (max-width: 640px) { .path-arrow { transform: rotate(90deg); align-self: start; margin-inline-start: 20px; } }
@media (max-width: 640px) { html[dir="rtl"] .path-arrow { transform: rotate(90deg) scaleX(-1); } }

.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mailed-note { font-size: 13px; color: var(--ink-soft); margin: 0; flex-basis: 100%; }

/* Printed / saved as PDF: the candidate keeps the report, not the interface.
 * Everything that only works on a screen is dropped. */
@media print {
  body { background: #fff; }
  .topbar, .footer, .actions, .lang-switch, #view-landing, #view-quiz, #view-gate { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .card {
    box-shadow: none; border-color: #ccd7e1; break-inside: avoid; page-break-inside: avoid;
    padding: 18px 20px; margin-block-end: 12px;
  }
  .spotlight { border-color: #b58f00; }
  .spotlight h1 { font-size: 26px; }
  .path { break-inside: avoid; page-break-inside: avoid; }
  /* The extras are the reason the PDF exists: the printed copy always carries
   * them, whether or not the reader opened them on screen. */
  .extras > summary { display: none; }
  .extras > .extras-body { display: block !important; }
  /* The depth section is longer than a page, so it is the one block allowed to
   * flow across pages: keeping it whole would push a mostly empty page. */
  .extras, .answer-list { break-inside: auto; page-break-inside: auto; }
  .answer-list div, .inside-list li { break-inside: avoid; page-break-inside: avoid; }
  .print-footer { display: block; font-size: 11px; color: #55636f; margin-top: 10px; }
  .print-head {
    display: flex; align-items: center; gap: 14px; margin-block-end: 14px;
    padding-block-end: 10px; border-block-end: 3px solid var(--gold);
  }
  .print-head img { height: 26px; width: auto; }
  .print-title { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--blue-dark); }
  .print-sub { font-size: 11.5px; color: var(--ink-soft); }
  .print-url { display: block; font-size: 12px; color: var(--blue); word-break: break-all; margin: 0 0 4px; }
  /* The printed header already says who it is for; twice is clutter. */
  .prepared { display: none; }
  #rec-cta { display: none; }
  a[href]::after { content: ""; }  /* no URL footnotes: the report is read, not audited */
}