/* ============================================================================
   Diagnostics suite — interactive tool styles
   Uses the brand tokens (--ink, --accent, --border, --surface, --radius …) that
   the standalone landing defines in :root and the MG theme defines in screen.css.
   Fonts use the same var(--gh-font-*, fallback) pattern as the theme, so this
   works unchanged in both contexts. All classes are .dx-prefixed.
============================================================================ */
/* When the tool mounts, drop the placeholder's centred layout so the
   questionnaire/report sit left-aligned and full-width inside the container. */
#diagnostic-tool.dx-mounted { display: block; place-items: initial; text-align: left; min-height: 0; }

.dx { font-family: var(--gh-font-body, "Montserrat", system-ui, sans-serif); color: var(--ink); text-align: left; }
.dx h3, .dx-screen-title { font-family: var(--gh-font-heading, "Cormorant Garamond", Georgia, serif); }
/* Containers receive programmatic focus for screen-reader flow — no visible ring.
   Keyboard focus rings stay on the actual controls only. */
.dx-screen-title, .dx-report, .dx-loading { outline: none; }
.dx a:focus-visible, .dx button:focus-visible, .dx input:focus-visible, .dx label:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ---- progress ---- */
.dx-progress { margin-bottom: 22px; }
.dx-progress-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dx-steps { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.dx-step { height: 4px; flex: 1; border-radius: 999px; background: var(--border); }
.dx-step.is-done { background: var(--accent); }
.dx-step.is-current { background: var(--ink); }

.dx-screen-title { font-size: clamp(22px, 3vw, 28px); font-weight: 600; margin: 0 0 22px; }

/* ---- questions ---- */
.dx-q { border: 0; padding: 0; margin: 0 0 26px; }
.dx-q-label { font-size: 17px; font-weight: 600; padding: 0; margin: 0 0 12px; color: var(--ink); }
.dx-q-help { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.dx-q-hint { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 12px; }
.dx-options { display: grid; gap: 10px; }
.dx-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; background: var(--bg); }
.dx-option:hover { border-color: var(--accent); }
.dx-radio { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--ink); flex: none; cursor: pointer; }
.dx-radio:checked ~ .dx-option-text { color: var(--ink); }
.dx-option:has(.dx-radio:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dx-option-text { font-size: 15px; line-height: 1.45; color: var(--ink); }

.dx-msg { min-height: 1.2em; margin: 4px 0 16px; color: #9a2a2a; font-size: 14px; font-weight: 600; }
.dx-nav { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- loading ---- */
.dx-loading { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0; gap: 18px; }
.dx-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: dx-spin .8s linear infinite; }
.dx-loading-text { color: var(--muted); font-size: 15px; margin: 0; }
@keyframes dx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dx-spinner { animation-duration: 2s; } }

/* ---- report ---- */
.dx-sr { position: absolute; left: -9999px; }
.dx-h { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; margin: 36px 0 16px; }

/* Left-aligned, full width. (Justify was tried and removed: on the web it makes
   uneven word spacing on short lines and clashes with the left-aligned titles.) */
.dx-headline { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 8px; }
.dx-score { display: flex; align-items: baseline; gap: 2px; font-family: var(--gh-font-heading, "Cormorant Garamond", serif); color: var(--ink); }
.dx-score-num { font-size: 72px; font-weight: 700; line-height: 1; }
.dx-score-of { font-size: 24px; color: var(--muted); }
.dx-badge { display: inline-block; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 4px 12px; border-radius: 6px; margin-bottom: 12px; }
.dx-exec { font-size: 17px; line-height: 1.55; margin: 0 0 10px; max-width: 60ch; }
.dx-bench { font-size: 15px; color: var(--muted); margin: 0; max-width: 60ch; }
/* migration shape: single biggest-risk callout, sits under the executive summary */
.dx-risk { font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--ink); margin: 12px 0 0; padding-left: 14px; border-left: 3px solid var(--accent); max-width: 62ch; }
/* migration shape: indicative timeline range, highlighted under the score block */
.dx-estimate { font-size: 15px; color: var(--ink); margin: 14px 0 0; }
.dx-estimate-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: 8px; }
/* migration shape: compliance alert banner, only when the answer is critical */
.dx-alert { margin: 26px 0 6px; border: 1px solid var(--accent); border-left-width: 4px; background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 10px; padding: 16px 18px; }
.dx-alert-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dk, #a9883a); margin: 0 0 6px; }
.dx-alert p:last-child { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 70ch; }

/* dimensions */
.dx-dimlist { display: grid; gap: 22px; }
.dx-dim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.dx-dim-name { font-weight: 600; font-size: 16px; }
.dx-dim-score { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.dx-bar { height: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.dx-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dx-dim-sum { font-size: 15px; color: var(--ink); margin: 10px 0 6px; max-width: 64ch; }
.dx-gaps { margin: 0; padding: 0; list-style: none; }
.dx-gaps li { position: relative; padding-left: 18px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.dx-gaps li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

/* recommendations */
.dx-recs { list-style: none; counter-reset: rec; margin: 0; padding: 0; display: grid; gap: 16px; }
.dx-rec { counter-increment: rec; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 14px); padding: 20px 22px; position: relative; }
.dx-rec::before { content: counter(rec); position: absolute; top: 18px; left: 22px; font-family: var(--gh-font-heading, "Cormorant Garamond", serif); font-weight: 700; font-size: 22px; color: var(--accent); }
.dx-rec-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; margin: 0 0 8px 34px; }
.dx-rec-action { font-weight: 600; font-size: 16px; }
.dx-rec-detail { font-size: 15px; color: var(--ink); margin: 0 0 0 34px; max-width: 62ch; line-height: 1.55; }

/* tags */
.dx-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-tag { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: capitalize; padding: 3px 9px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); white-space: nowrap; }
.dx-tag-plain { text-transform: none; background: var(--surface); border: 1px solid var(--border); }
.dx-antis { margin-top: 4px; }

/* regulatory shape: context + timeline paragraphs */
.dx-context { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; max-width: 64ch; }

.dx-wins { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dx-wins li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.dx-wins li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* personalised CTA inside the report */
.dx-ref { margin-top: 28px; font-size: 13px; color: var(--muted, #8A9099); letter-spacing: 0.01em; }
.dx-ref-label { font-weight: 600; }
.dx-cta { margin-top: 36px; background: var(--ink); border-radius: var(--radius, 14px); padding: clamp(24px, 4vw, 36px); }
/* Report CTA sits on the navy panel: primary flips to gold/navy, ghost to white.
   (The live theme has no .on-dark rule, so style the buttons here explicitly,
   otherwise the ghost button renders navy-on-navy and its label disappears.) */
.dx-cta .btn-primary { background: var(--accent); color: var(--ink); }
.dx-cta .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.dx-cta .btn-ghost { border-color: rgba(255,255,255,0.3); color: #fff; }
.dx-cta .btn-ghost:hover { border-color: #fff; }
.dx-cta-text { color: #e8eaee; font-size: 16px; line-height: 1.6; margin: 0 0 22px; max-width: 64ch; }
.dx-cta-next { display: inline-block; margin-top: 18px; color: var(--accent); font-size: 14px; font-weight: 600; }
.dx-cta-next:hover { color: color-mix(in srgb, var(--accent) 85%, #fff); text-decoration: underline; }

.dx-restart { margin-top: 26px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; }
.dx-restart:hover { color: var(--accent-dk, #a9883a); }

.dx-error .dx-nav { margin-top: 18px; }

/* ---- Framework label, moved to the bottom of the box (subtle) ---- */
.dx-fw-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
.dx-fw { display: inline-block; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 6px; }

/* ---- Report actions (download PDF + start again) ---- */
.dx-report-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.dx-report-actions .dx-restart { margin-top: 0; }

/* ---- PDF / print ---- */
.dx-print-only { display: none; }

@media print {
  /* Show the print-only header + contact footer; hide on-screen controls */
  .dx-print-only { display: block !important; }
  .dx-report-actions, .dx-fw-foot { display: none !important; }

  /* Legible on paper, brand accents preserved */
  .dx, .dx-report { color: #111 !important; }
  .dx-badge { color: #000 !important; border-color: #000 !important; }
  .dx-dim, .dx-rec { break-inside: avoid; page-break-inside: avoid; }
  .dx-bar { border-color: #999 !important; }
  .dx-bar-fill { background: #C2A14A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dx-tag { background: #eee !important; color: #333 !important; }
  .dx-risk { border-left-color: #C2A14A !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dx-estimate-label { color: #000 !important; }
  .dx-alert { border-color: #C2A14A !important; background: #fff !important; break-inside: avoid; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dx-alert-title { color: #111 !important; }
  .dx-cta { background: #fff !important; border: 1px solid #C2A14A !important; padding: 18px 20px !important; }
  .dx-cta-text { color: #111 !important; }
  .dx-cta .btn-row, .dx-cta-next { display: none !important; }  /* links are dead on paper */

  .dx-print-head { margin-bottom: 22px; }
  .dx-print-head .dx-ph-name { font-family: var(--gh-font-heading, "Cormorant Garamond", serif); font-size: 26px; font-weight: 700; color: #111; }
  .dx-print-head .dx-ph-sub { font-size: 12px; color: #555; margin-top: 2px; }
  .dx-print-foot { margin-top: 28px; padding-top: 14px; border-top: 2px solid #C2A14A; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 12px; line-height: 1.6; color: #333; }
  .dx-print-foot strong { color: #111; }
}

/* Width override LAST so it wins over the per-section max-widths defined above —
   the running paragraphs fill the box instead of a narrow left column. */
.dx-exec, .dx-bench, .dx-risk, .dx-dim-sum, .dx-rec-detail, .dx-cta-text, .dx-context { max-width: none; }