/*
 * Meridian AI Diagnostic v2 — Front-end styles
 *
 * All selectors are scoped to .mrd2-* prefix to avoid collisions with the
 * existing theme (mrd-* prefix) and any other plugins.
 *
 * Layout token:
 *   --mrd2-navy   : primary dark brand color
 *   --mrd2-gold   : accent / CTA
 *   --mrd2-surface: card/section background
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */

.mrd2-app {
  --mrd2-navy:      #0b1c2c;
  --mrd2-navy-80:   #1a3550;
  --mrd2-gold:      #b48c32;
  --mrd2-gold-lt:   #f5eddb;
  --mrd2-red:       #b42828;
  --mrd2-red-lt:    #fbeaea;
  --mrd2-yellow:    #8a6200;
  --mrd2-yellow-lt: #fffbea;
  --mrd2-yellow-bd: #f5c842;
  --mrd2-green:     #1a7849;
  --mrd2-blue:      #1e6498;
  --mrd2-orange:    #af6e00;

  --mrd2-text:            #1a1a2e;
  --mrd2-text-muted:      #3d4455;
  --mrd2-border:          #d4dae4;
  --mrd2-surface:         #f7f9fc;
  --mrd2-white:           #ffffff;

  --mrd2-idk-selected-bg: #f0f2f5;
  --mrd2-idk-type-bg:     #eef2f8;
  --mrd2-consent-tag-bg:  #eef6fc;
  --mrd2-red-text:        #5a1a1a;
  --mrd2-gold-text:       #4a3800;

  --mrd2-radius:    6px;
  --mrd2-radius-lg: 12px;
  --mrd2-shadow:    0 2px 12px rgba(11,28,44,.10);

  --mrd2-font:      inherit; /* uses theme body font */
  --mrd2-max-w:     780px;

  font-family: var(--mrd2-font);
  color:        var(--mrd2-text);
  position:     relative;
}

/* ── Progress stepper ──────────────────────────────────────────────────────── */

.mrd2-stepper-wrap {
  margin-bottom: 1.65rem;
}

.mrd2-stepper-list {
  display:               grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:                   .35rem;
  list-style:            none;
  margin:                0;
  padding:               0;
}

.mrd2-stepper-item {
  display:        flex;
  align-items:    center;
  gap:            .45rem;
  min-width:      0;
  color:          var(--mrd2-text-muted);
  font-size:      .78rem;
  font-weight:    700;
}

.mrd2-stepper-dot {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.65rem;
  height:          1.65rem;
  border-radius:   50%;
  border:          1px solid var(--mrd2-border);
  background:      var(--mrd2-white);
  color:           var(--mrd2-text-muted);
  flex:            0 0 auto;
}

.mrd2-stepper-label {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.mrd2-stepper-item--completed .mrd2-stepper-dot {
  background:   var(--mrd2-navy);
  border-color: var(--mrd2-navy);
  color:        var(--mrd2-white);
}

.mrd2-stepper-item--current {
  color: var(--mrd2-navy);
}

.mrd2-stepper-item--current .mrd2-stepper-dot {
  border-color: var(--mrd2-gold);
  box-shadow:   0 0 0 3px var(--mrd2-gold-lt);
  color:        var(--mrd2-navy);
}

.mrd2-progress-meta {
  color:       var(--mrd2-text-muted);
  font-size:   .82rem;
  font-weight: 700;
  margin-top:  .65rem;
}

/* ── Loading state ─────────────────────────────────────────────────────────── */

.mrd2-loading {
  min-height: 120px;
}

.mrd2-loading__spinner {
  display: none;
}

/* ── Screen wrapper ────────────────────────────────────────────────────────── */

.mrd2-screens {
  max-width:  var(--mrd2-max-w);
  margin:     0 auto;
}

.mrd2-screen {
  padding: .5rem 0 2rem;
}

/* ── Typography helpers ────────────────────────────────────────────────────── */

.mrd2-pretitle {
  font-size:      .75rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--mrd2-gold);
  margin-bottom:  .5rem;
}

.mrd2-app .mrd2-heading {
  font-size:   clamp(1.65rem, 2.3vw, 2.15rem);
  font-weight: 700;
  color:       var(--mrd2-navy);
  line-height: 1.2;
  margin:      0 0 1rem;
}

.mrd2-subtext {
  color:         var(--mrd2-text-muted);
  max-width:     600px;
  line-height:   1.65;
  margin-bottom: 1rem;
}

.mrd2-section-heading {
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--mrd2-navy);
  border-bottom: 2px solid var(--mrd2-gold);
  padding-bottom:.4rem;
  margin:        2rem 0 1rem;
}

/* ── Screen: Landing — sector grid ────────────────────────────────────────── */

.mrd2-sector-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   .75rem;
  margin-top:            1.5rem;
}

.mrd2-sector-btn {
  background:    var(--mrd2-surface);
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius-lg);
  padding:       1.1rem 1.25rem;
  font-size:     .95rem;
  font-weight:   600;
  color:         var(--mrd2-navy);
  text-align:    left;
  cursor:        pointer;
  transition:    border-color .2s, box-shadow .2s, background .2s;
  line-height:   1.4;
}

.mrd2-sector-btn__label,
.mrd2-sector-btn__help {
  display: block;
}

.mrd2-sector-btn__label {
  color:       var(--mrd2-navy);
  font-weight: 800;
}

.mrd2-sector-btn__help {
  color:       var(--mrd2-text-muted);
  font-size:   .8rem;
  font-weight: 500;
  line-height: 1.45;
  margin-top:  .35rem;
}

.mrd2-sector-btn:hover,
.mrd2-sector-btn:focus-visible {
  border-color:  var(--mrd2-navy);
  box-shadow:    var(--mrd2-shadow);
  background:    var(--mrd2-white);
}

.mrd2-sector-btn:focus-visible {
  outline:       2px solid var(--mrd2-gold);
  outline-offset:3px;
}

.mrd2-roadmap {
  margin: 1.4rem 0 1.6rem;
}

.mrd2-roadmap__title {
  color:       var(--mrd2-navy);
  font-size:   1.05rem;
  font-weight: 800;
  margin:      0 0 .75rem;
}

.mrd2-roadmap__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       .45rem;
  margin:    0 0 .9rem;
}

.mrd2-roadmap__badges span {
  background:    var(--mrd2-gold-lt);
  border:        1px solid #ead8ad;
  border-radius: 999px;
  color:         var(--mrd2-gold-text);
  font-size:     .76rem;
  font-weight:   800;
  padding:       .25rem .6rem;
}

.mrd2-roadmap__grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   .75rem;
}

.mrd2-roadmap-card {
  display:       flex;
  align-items:   flex-start;
  gap:           .65rem;
  background:    var(--mrd2-surface);
  border:        1px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       .85rem;
  min-width:     0;
}

.mrd2-roadmap-card__num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.55rem;
  height:          1.55rem;
  border-radius:   50%;
  background:      var(--mrd2-navy);
  color:           var(--mrd2-white);
  font-size:       .75rem;
  font-weight:     800;
  flex:            0 0 auto;
}

.mrd2-roadmap-card__title {
  color:       var(--mrd2-navy);
  font-size:   .88rem;
  font-weight: 800;
  line-height: 1.3;
  margin:      .05rem 0 .3rem;
}

.mrd2-roadmap-card__desc {
  color:       var(--mrd2-text-muted);
  font-size:   .8rem;
  line-height: 1.45;
  margin:      0;
}

.mrd2-roadmap--compact .mrd2-roadmap__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Screen: Profile — form fields ─────────────────────────────────────────── */

.mrd2-field {
  margin-bottom: 1.25rem;
}

.mrd2-field label {
  display:       block;
  font-weight:   600;
  font-size:     .875rem;
  color:         var(--mrd2-navy);
  margin-bottom: .35rem;
}

.mrd2-field input[type="text"],
.mrd2-field input[type="email"],
.mrd2-field select {
  width:         100%;
  max-width:     480px;
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       .6rem .85rem;
  font-size:     .95rem;
  font-family:   inherit;
  color:         var(--mrd2-text);
  background:    var(--mrd2-white);
  box-sizing:    border-box;
  transition:    border-color .15s;
}

.mrd2-field select option {
  font-family: inherit;
  font-size:   .95rem;
}

/* select/option already inherit from .mrd2-field select { font-family: inherit }
   which cascades from the theme body font — no override needed here. */

.mrd2-field input:focus,
.mrd2-field select:focus {
  border-color: var(--mrd2-navy);
  outline:      none;
  box-shadow:   0 0 0 3px rgba(11,28,44,.12);
}

.mrd2-field input[type="checkbox"] {
  width:        1rem;
  height:       1rem;
  min-height:   0;
  padding:      0;
  margin-right: .5rem;
  accent-color: var(--mrd2-navy);
  cursor:       pointer;
}

.mrd2-field-error {
  color:      var(--mrd2-red);
  font-size:  .8rem;
  margin-top: .25rem;
}

/* ── Screen: Questions ─────────────────────────────────────────────────────── */

.mrd2-q-meta {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  margin-bottom: 1rem;
}

.mrd2-dim-tag {
  background:    var(--mrd2-navy);
  color:         var(--mrd2-white);
  font-size:     .72rem;
  font-weight:   600;
  letter-spacing:.05em;
  padding:       .25em .7em;
  border-radius: 2em;
  text-transform: uppercase;
}

.mrd2-q-count {
  color:     var(--mrd2-text-muted);
  font-size: .82rem;
}

.mrd2-app h2.mrd2-q-text,
.mrd2-app .mrd2-q-text {
  font-size:   clamp(1.55rem, 2.55vw, 2.15rem);
  font-weight: 700;
  color:       var(--mrd2-navy);
  line-height: 1.22;
  margin:      0 0 1.45rem;
  max-width:   760px;
  letter-spacing: 0;
}

.mrd2-anchors {
  display:       flex;
  flex-direction:column;
  gap:           .6rem;
}

.mrd2-anchor {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       .85rem 1rem;
  cursor:        pointer;
  transition:    border-color .15s, background .15s, box-shadow .15s;
  background:    var(--mrd2-white);
}

.mrd2-anchor input[type="radio"] {
  width:        1rem;
  height:       1rem;
  min-height:   0;
  padding:      0;
  flex-shrink:  0;
  accent-color: var(--mrd2-navy);
  cursor:       pointer;
}

.mrd2-anchor__label {
  font-size:   .92rem;
  font-weight: 800;
  color:       #7a5c00;
  min-width:   70px;
  flex-shrink: 0;
}

.mrd2-anchor__text {
  font-size:  .9rem;
  color:      var(--mrd2-text);
  line-height:1.5;
}

.mrd2-anchor--selected {
  border-color: var(--mrd2-navy);
  background:   #eef6fc;
  box-shadow:   inset -4px 0 0 var(--mrd2-gold);
}

.mrd2-anchor--idk {
  border-style: dashed;
  opacity:      .8;
}

.mrd2-anchor--idk.mrd2-anchor--selected {
  border-color: var(--mrd2-text-muted);
  background:   var(--mrd2-idk-selected-bg);
  box-shadow:   inset -4px 0 0 var(--mrd2-text-muted);
}

.mrd2-anchor:hover,
.mrd2-anchor:focus-within {
  border-color: var(--mrd2-navy-80);
  background:   var(--mrd2-surface);
}

.mrd2-anchor:focus-within {
  outline:       2px solid var(--mrd2-gold);
  outline-offset:3px;
}

/* ── Navigation row ────────────────────────────────────────────────────────── */

.mrd2-nav {
  display:     flex;
  gap:         .75rem;
  margin-top:  1.75rem;
  flex-wrap:   wrap;
  align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.mrd2-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content:center;
  border:        none;
  border-radius: var(--mrd2-radius);
  padding:       .65rem 1.4rem;
  font-size:     .95rem;
  font-family:   inherit;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .2s, opacity .2s, box-shadow .2s;
  text-decoration:none;
  line-height:   1.3;
}

.mrd2-btn:focus-visible {
  outline:    2px solid var(--mrd2-gold);
  outline-offset:2px;
}

.mrd2-btn--primary {
  background: var(--mrd2-navy);
  color:      var(--mrd2-white);
}

.mrd2-btn--primary:hover { background: var(--mrd2-navy-80); }

.mrd2-btn--ghost {
  background:  transparent;
  color:       var(--mrd2-navy);
  border:      1.5px solid var(--mrd2-border);
}

.mrd2-btn--ghost:hover { border-color: var(--mrd2-navy); background: var(--mrd2-surface); }

.mrd2-btn--full { width: 100%; }

.mrd2-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Screen: Review ───────────────────────────────────────────────────────── */

.mrd2-review-summary {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .5rem .9rem;
  background:    var(--mrd2-surface);
  border:        1px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       .9rem 1rem;
  margin:        1rem 0;
}

.mrd2-review-summary strong,
.mrd2-review-summary span {
  color:       var(--mrd2-navy);
  font-size:   .9rem;
  line-height: 1.45;
}

.mrd2-review-rows {
  border-top: 1px solid var(--mrd2-border);
  margin-top: .75rem;
}

.mrd2-review-row {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       .75rem 0;
  border-bottom: 1px solid var(--mrd2-border);
}

.mrd2-review-row__label {
  color:       var(--mrd2-navy);
  font-weight: 800;
  flex:        1 1 220px;
}

.mrd2-review-row__meta {
  color:      var(--mrd2-text-muted);
  font-size:  .85rem;
  flex:       0 1 260px;
}

.mrd2-review-idk-list {
  margin: 0;
  padding-left: 1.25rem;
}

.mrd2-review-idk-list li {
  color:       var(--mrd2-text-muted);
  font-size:   .9rem;
  line-height: 1.55;
  margin:      .35rem 0;
}

/* ── Screen: Gate ──────────────────────────────────────────────────────────── */

.mrd2-gate-intro {
  border-left:  4px solid var(--mrd2-gold);
  padding-left: 1.25rem;
  margin-bottom:2rem;
}

.mrd2-fieldset--consent {
  margin-bottom: 1rem;
}

.mrd2-consent-legend {
  font-size:      .72rem;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--mrd2-navy);
  padding:        0 .35rem;
}

.mrd2-consent-legend--opt {
  color: var(--mrd2-text-muted);
}

.mrd2-fieldset--consent .mrd2-checkbox-label {
  align-items: flex-start;
  font-size:   .88rem;
  color:       var(--mrd2-text-muted);
}

.mrd2-checkbox-label {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  font-size:   .9rem;
  line-height: 1.55;
  cursor:      pointer;
  color:       var(--mrd2-text);
}

.mrd2-checkbox-label input[type="checkbox"] {
  width:        1rem;
  height:       1rem;
  min-height:   0;
  padding:      0;
  margin-top:   .25rem;
  flex-shrink:  0;
  accent-color: var(--mrd2-navy);
  cursor:       pointer;
}

.mrd2-legal-note {
  font-size:  .78rem;
  color:      var(--mrd2-text-muted);
  margin-top: 1.25rem;
  line-height:1.6;
}

/* ── Screen: Results ───────────────────────────────────────────────────────── */

.mrd2-risk-overview {
  background:    var(--mrd2-surface);
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius-lg);
  padding:       1.25rem;
  margin-bottom: 2rem;
}

.mrd2-risk-overview__title {
  color:       var(--mrd2-navy);
  font-size:   1.2rem;
  font-weight: 800;
  margin:      0 0 .65rem;
}

.mrd2-risk-overview .mrd2-section-heading {
  font-size:     .95rem;
  margin-top:    1.2rem;
  margin-bottom: .75rem;
}

.mrd2-results-hero {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items:           center;
  gap:                   clamp(1.5rem, 5vw, 3rem);
  margin-bottom:         2.25rem;
}

.mrd2-results-hero__visual {
  min-width:       0;
  display:         flex;
  justify-content: center;
  overflow:        visible;
}

.mrd2-archetype {
  border-left:  4px solid var(--mrd2-gold);
  padding-left: 1.25rem;
  margin-bottom:0;
  min-width:    0;
}

.mrd2-archetype__label {
  font-size:   1.6rem;
  font-weight: 700;
  color:       var(--mrd2-navy);
  margin:      0 0 .75rem;
}

.mrd2-archetype__desc {
  color:       var(--mrd2-text-muted);
  line-height: 1.65;
  max-width:   660px;
  margin:      0;
}

.mrd2-risk-status {
  margin:      .35rem 0 .6rem;
  color:       var(--mrd2-navy);
  font-size:   .92rem;
  font-weight: 700;
  line-height: 1.45;
}

.mrd2-confidence {
  font-size:   .83rem;
  margin-top:  .75rem;
  padding:     .35rem .65rem;
  border-radius: var(--mrd2-radius);
  display:     inline-block;
}

.mrd2-confidence--provisional {
  background: #fff8e6;
  color:      var(--mrd2-orange);
  border:     1px solid #f5d87a;
}

.mrd2-confidence--low {
  background: var(--mrd2-red-lt);
  color:      var(--mrd2-red);
  border:     1px solid #e8b0b0;
}

/* SVG radar */

.mrd2-radar-wrap {
  display:        flex;
  justify-content:center;
  width:          100%;
  margin:         0;
  padding:        .75rem 1.5rem;
  box-sizing:     border-box;
}

.mrd2-radar-svg {
  width:    100%;
  max-width:300px;
  height:   auto;
  display:  block;
  overflow: visible;
}

/* Dimension table */

.mrd2-dimensions {
  margin-bottom: 1.5rem;
}

.mrd2-dim-row {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  padding:       .6rem 0;
  border-bottom: 1px solid var(--mrd2-border);
}

.mrd2-dim-row__label {
  font-weight: 600;
  font-size:   .9rem;
  color:       var(--mrd2-navy);
  flex:        1 1 180px;
  min-width:   0;
}

.mrd2-dim-row__band {
  font-size:  .8rem;
  font-weight:700;
  flex:       0 1 110px;
  min-width: 0;
  white-space:normal;
}

.mrd2-dim-row__note {
  display:     block;
  margin-top:  .15rem;
  color:       var(--mrd2-text-muted);
  font-size:   .74rem;
  font-weight: 500;
  line-height: 1.35;
}

.mrd2-dim-row--low_readiness        .mrd2-dim-row__band { color: var(--mrd2-red);    }
.mrd2-dim-row--developing_readiness .mrd2-dim-row__band { color: var(--mrd2-orange); }
.mrd2-dim-row--established_readiness .mrd2-dim-row__band { color: var(--mrd2-blue);   }
.mrd2-dim-row--advanced_readiness   .mrd2-dim-row__band { color: var(--mrd2-green);  }
.mrd2-dim-row--insufficient_responses .mrd2-dim-row__band { color: var(--mrd2-text-muted); }

.mrd2-dim-row__bar {
  flex:            1;
  min-width:       0;
  height:          8px;
  background:      var(--mrd2-border);
  border-radius:   4px;
  overflow:        hidden;
}

.mrd2-dim-bar {
  height:        100%;
  background:    var(--mrd2-navy);
  border-radius: 4px;
  transition:    width .6s ease;
}

/* Flag alerts */

.mrd2-flags {
  margin-bottom: 1.5rem;
}

.mrd2-flag-alert {
  background:    var(--mrd2-red-lt);
  border-left:   4px solid var(--mrd2-red);
  border-radius: var(--mrd2-radius);
  padding:       .9rem 1.1rem;
  margin-bottom: .75rem;
}

.mrd2-flag-alert__title {
  font-weight:  700;
  font-size:    .9rem;
  color:        var(--mrd2-red);
  margin-bottom:.3rem;
}

.mrd2-flag-alert__text {
  font-size:  .88rem;
  color:      var(--mrd2-red-text);
  line-height:1.55;
  margin:     0;
}

.mrd2-advisory-note {
  background:    var(--mrd2-yellow-lt);
  border-left:   4px solid var(--mrd2-yellow-bd);
  border-radius: var(--mrd2-radius);
  padding:       .9rem 1.1rem;
  margin-bottom: 1.5rem;
}

.mrd2-advisory-note p {
  color:       var(--mrd2-gold-text);
  font-size:   .9rem;
  line-height: 1.6;
  margin:      0;
}

/* Action plan */

.mrd2-action-plan {
  margin-bottom: 1.5rem;
}

.mrd2-action-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.mrd2-action-item {
  display:       flex;
  gap:           .9rem;
  padding:       .7rem 0;
  border-bottom: 1px solid var(--mrd2-border);
  align-items:   flex-start;
}

.mrd2-action-num {
  background:    var(--mrd2-navy);
  color:         var(--mrd2-white);
  font-size:     .75rem;
  font-weight:   700;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content:center;
  flex-shrink:   0;
  margin-top:    .1rem;
}

.mrd2-action-text {
  font-size:  .9rem;
  color:      var(--mrd2-text);
  line-height:1.6;
}

/* CTA band */

.mrd2-cta-band {
  background:    var(--mrd2-surface);
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius-lg);
  padding:       1.75rem;
  margin-top:    2rem;
}

.mrd2-cta-band__heading {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--mrd2-navy);
  margin:      0 0 .5rem;
}

.mrd2-cta-band__text {
  color:         var(--mrd2-text-muted);
  font-size:     .9rem;
  line-height:   1.6;
  margin-bottom: 1.25rem;
  max-width:     560px;
}

.mrd2-cta-band__actions {
  display:  flex;
  gap:      .75rem;
  flex-wrap:wrap;
}

.mrd2-restart-row {
  margin-top:  1.5rem;
  text-align:  center;
}

.mrd2-contact-row {
  margin-top: .75rem;
  text-align: center;
}

.mrd2-feedback {
  background:    var(--mrd2-surface);
  border:        1px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       1rem;
  margin-top:    1rem;
}

.mrd2-feedback__prompt {
  color:       var(--mrd2-navy);
  font-weight: 700;
  line-height: 1.45;
  margin:      0 0 .75rem;
}

.mrd2-feedback__ratings {
  display:   flex;
  flex-wrap: wrap;
  gap:       .5rem;
}

.mrd2-feedback__rating {
  min-width:     2.35rem;
  min-height:    2.35rem;
  border:        1px solid var(--mrd2-border);
  border-radius: 999px;
  background:    var(--mrd2-white);
  color:         var(--mrd2-navy);
  font-weight:   700;
  cursor:        pointer;
}

.mrd2-feedback__rating:hover,
.mrd2-feedback__rating:focus-visible {
  border-color: var(--mrd2-gold);
  outline:      2px solid var(--mrd2-gold-lt);
}

.mrd2-feedback__warning {
  color:       var(--mrd2-text-muted);
  font-size:   .82rem;
  line-height: 1.5;
  margin:      .75rem 0 0;
}

.mrd2-btn--sm {
  padding:     .45rem 1.1rem;
  font-size:   .78rem;
}

/* ── Screen: Email sent ─────────────────────────────────────────────────────── */

.mrd2-screen--email-sent {
  text-align: center;
  padding:    3rem 1rem;
}

.mrd2-icon-check {
  width:         52px;
  height:        52px;
  background:    var(--mrd2-green);
  border-radius: 50%;
  margin:        0 auto 1.25rem;
  position:      relative;
}

.mrd2-icon-check::after {
  content:    '';
  position:   absolute;
  left:       14px;
  top:        20px;
  width:      10px;
  height:     18px;
  border:     3px solid #fff;
  border-top: none;
  border-left:none;
  transform:  rotate(45deg) translate(-4px, -4px);
}

/* ── Screen: Error ──────────────────────────────────────────────────────────── */

.mrd2-screen--error {
  text-align: center;
  padding:    3rem 1rem;
}

/* ── Accessibility ──────────────────────────────────────────────────────────── */

.mrd2-sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  white-space:nowrap;
  border:    0;
}

/* ── Optional label / heading ────────────────────────────────────────────────── */

.mrd2-optional {
  font-weight: 400;
  color:       var(--mrd2-text-muted);
  font-size:   .82em;
  margin-left: .3em;
}

.mrd2-optional-heading {
  font-weight: 400;
  font-size:   .75em;
  color:       var(--mrd2-text-muted);
  margin-left: .4em;
  vertical-align: middle;
}

/* ── Fieldset (Step 1b checkboxes) ──────────────────────────────────────────── */

.mrd2-fieldset {
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       1rem 1.1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.mrd2-fieldset legend {
  font-weight: 600;
  font-size:   .875rem;
  color:       var(--mrd2-navy);
  padding:     0 .35rem;
}

.mrd2-fieldset .mrd2-checkbox-label {
  margin-bottom: .6rem;
}

/* ── Field hint ─────────────────────────────────────────────────────────────── */

.mrd2-field-hint {
  font-size:  .8rem;
  color:      var(--mrd2-text-muted);
  margin-top: .25rem;
}

/* ── Scoring instruction callout ─────────────────────────────────────────────── */

.mrd2-scoring-instruction {
  background:    var(--mrd2-gold-lt);
  border-left:   3px solid var(--mrd2-gold);
  border-radius: var(--mrd2-radius);
  padding:       .65rem 1rem;
  font-size:     .84rem;
  color:         var(--mrd2-gold-text);
  line-height:   1.6;
  margin-bottom: 1.25rem;
}

/* ── IDK expansion area ─────────────────────────────────────────────────────── */

.mrd2-idk-expand {
  display:       none;
  background:    var(--mrd2-surface);
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       .9rem 1rem;
  margin-top:    .4rem;
  margin-left:   2rem;
}

.mrd2-idk-expand--open {
  display: block;
}

.mrd2-idk-expand__prompt {
  font-size:     .84rem;
  font-weight:   600;
  color:         var(--mrd2-text-muted);
  margin:        0 0 .65rem;
}

.mrd2-idk-type {
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  padding:       .55rem .7rem;
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  cursor:        pointer;
  font-size:     .88rem;
  color:         var(--mrd2-text);
  line-height:   1.5;
  margin-bottom: .45rem;
  background:    var(--mrd2-white);
  transition:    border-color .15s, background .15s;
}

.mrd2-idk-type input[type="radio"] {
  width:        1rem;
  height:       1rem;
  min-height:   0;
  padding:      0;
  margin-top:   .2rem;
  flex-shrink:  0;
  accent-color: var(--mrd2-navy);
  cursor:       pointer;
}

.mrd2-idk-type--selected {
  border-color: var(--mrd2-navy);
  background:   var(--mrd2-idk-type-bg);
}

.mrd2-btn--sm {
  padding:   .4rem .9rem;
  font-size: .82rem;
}

/* ── Gate screen: flag count preview ────────────────────────────────────────── */

.mrd2-gate-flag-preview {
  background:    var(--mrd2-red-lt);
  border-left:   3px solid var(--mrd2-red);
  border-radius: var(--mrd2-radius);
  padding:       .65rem 1rem;
  font-size:     .88rem;
  color:         var(--mrd2-red-text);
  margin-top:    .75rem;
  line-height:   1.5;
}

/* ── Flag alerts: hard (red) vs watch (yellow) ──────────────────────────────── */

.mrd2-flag-alert--hard {
  background:  var(--mrd2-red-lt);
  border-left: 4px solid var(--mrd2-red);
}

.mrd2-flag-alert--hard .mrd2-flag-alert__title { color: var(--mrd2-red);      }
.mrd2-flag-alert--hard .mrd2-flag-alert__text  { color: var(--mrd2-red-text); }

.mrd2-flag-alert--watch {
  background:  var(--mrd2-yellow-lt);
  border-left: 4px solid var(--mrd2-yellow-bd);
}

.mrd2-flag-alert--watch .mrd2-flag-alert__title {
  color: var(--mrd2-yellow);
}

.mrd2-flag-alert--watch .mrd2-flag-alert__text {
  color: var(--mrd2-gold-text);
}

/* ── Interpretation notes ────────────────────────────────────────────────────── */

.mrd2-interp-notes {
  margin-bottom: 1.5rem;
}

.mrd2-interp-note {
  font-size:     .9rem;
  color:         var(--mrd2-text-muted);
  line-height:   1.65;
  padding:       .5rem 0;
  border-bottom: 1px solid var(--mrd2-border);
  margin:        0;
}

.mrd2-interp-note:last-child { border-bottom: none; }

/* ── Scope / context notes ───────────────────────────────────────────────────── */

.mrd2-scope-note {
  margin-bottom: 1.5rem;
}

.mrd2-scope-note__item {
  font-size:     .9rem;
  color:         var(--mrd2-text);
  line-height:   1.65;
  padding:       .65rem .9rem;
  background:    var(--mrd2-surface);
  border-radius: var(--mrd2-radius);
  border-left:   3px solid var(--mrd2-border);
  margin-bottom: .5rem;
}

/* ── IDK visibility gap note ─────────────────────────────────────────────────── */

.mrd2-idk-gap-note {
  background:    var(--mrd2-surface);
  border:        1.5px solid var(--mrd2-border);
  border-radius: var(--mrd2-radius);
  padding:       1rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size:     .9rem;
  color:         var(--mrd2-text-muted);
  line-height:   1.65;
}

.mrd2-idk-gap-note p { margin: 0; }

/* ── Sector blind spots ──────────────────────────────────────────────────────── */

.mrd2-blind-spots {
  margin-bottom: 1.5rem;
}

.mrd2-blind-spots__text {
  font-size:     .9rem;
  color:         var(--mrd2-text-muted);
  line-height:   1.7;
  margin:        0;
}

/* ── PDF button inline spinner ───────────────────────────────────────────────── */

.mrd2-spinner {
  display:      inline-block;
  width:        14px;
  height:       14px;
  border:       2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius:50%;
  animation:    mrd2-spin .6s linear infinite;
  vertical-align: middle;
  margin-right: .4em;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .mrd2-heading        { font-size: 1.4rem; }
  .mrd2-stepper-list   { grid-template-columns: 1fr; gap: .5rem; }
  .mrd2-stepper-item   { font-size: .85rem; }
  .mrd2-sector-grid    { grid-template-columns: 1fr; }
  .mrd2-roadmap__grid,
  .mrd2-roadmap--compact .mrd2-roadmap__grid { grid-template-columns: 1fr; }
  .mrd2-review-row     { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .mrd2-review-row__label,
  .mrd2-review-row__meta { flex: 1 1 auto; }
  .mrd2-results-hero   {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.25rem;
    margin-bottom: 2rem;
  }
  .mrd2-results-hero__visual { justify-content: center; }
  .mrd2-radar-wrap     { padding: .5rem .75rem 0; }
  .mrd2-radar-svg      { max-width: min(280px, 100%); }
  .mrd2-anchor         { align-items: flex-start; }
  .mrd2-anchor__label  { flex: 0 1 6rem; min-width: 0; }
  .mrd2-dim-row        { flex-wrap: wrap; }
  .mrd2-dim-row__label { flex: 1 1 100%; font-size: .85rem; }
  .mrd2-dim-row__band  { flex: 1 1 auto; font-size: .75rem; white-space: normal; }
  .mrd2-dim-row__bar   { flex: 1 1 100%; }
  .mrd2-cta-band__actions { flex-direction: column; }
  .mrd2-nav            { flex-direction: column; }
  .mrd2-btn--ghost,
  .mrd2-btn--primary   { width: 100%; }
  .mrd2-field input[type="text"],
  .mrd2-field input[type="email"],
  .mrd2-field select   { max-width: 100%; }
  .mrd2-idk-expand     { margin-left: 0; }
}

@media (max-width: 360px) {
  .mrd2-app            { font-size: 15px; }
  .mrd2-heading        { font-size: 1.25rem; }
  .mrd2-anchor         { padding: .65rem .75rem; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */

@media print {
  .mrd2-stepper-wrap,
  .mrd2-nav,
  .mrd2-cta-band,
  .mrd2-feedback,
  .mrd2-screen--gate,
  .mrd2-screen--step1a,
  .mrd2-screen--step1b { display: none !important; }

  .mrd2-screen--results { padding: 0; }

  .mrd2-results-hero {
    display: block;
    margin-bottom: 1.5rem;
  }

  .mrd2-radar-wrap { justify-content: flex-start; }

  .mrd2-radar-svg,
  .mrd2-radar-svg--print {
    max-width:  220px;
    page-break-inside: avoid;
  }

  .mrd2-flag-alert,
  .mrd2-action-item,
  .mrd2-dim-row { page-break-inside: avoid; }

  .mrd2-section-heading { page-break-after: avoid; }
}

/* ── RTL (Arabic) ────────────────────────────────────────────────────────────
   Scoped to [dir="rtl"] so it only fires when the JS sets direction on the
   app root. No changes needed to HTML — the JS already sets dir="rtl" on
   .mrd2-app when report_language is ar.
   ─────────────────────────────────────────────────────────────────────────── */

[dir="rtl"] .mrd2-app,
.mrd2-app[dir="rtl"] {
  direction:  rtl;
  text-align: right;
}

[dir="rtl"] .mrd2-anchor--selected,
.mrd2-app[dir="rtl"] .mrd2-anchor--selected {
  box-shadow: inset 4px 0 0 var(--mrd2-gold);
}

[dir="rtl"] .mrd2-anchor--idk.mrd2-anchor--selected,
.mrd2-app[dir="rtl"] .mrd2-anchor--idk.mrd2-anchor--selected {
  box-shadow: inset 4px 0 0 var(--mrd2-text-muted);
}

/* Sector selection buttons */
[dir="rtl"] .mrd2-sector-btn,
.mrd2-app[dir="rtl"] .mrd2-sector-btn {
  text-align: right !important;
}

/* Pretitle is tiny at .75rem — Arabic script needs more room */
[dir="rtl"] .mrd2-pretitle,
.mrd2-app[dir="rtl"] .mrd2-pretitle {
  font-size: 1rem;
  letter-spacing: 0;        /* Arabic doesn't use letter-spacing */
  text-transform: none;     /* uppercase transform breaks Arabic */
}

/* Question anchors — radio sits on the right in RTL.
   HTML order is [radio][label][text]. With direction:rtl the flex main axis
   goes right-to-left, so the first item (radio) lands on the right naturally.
   No row-reverse needed or wanted. */

/* Nav bar — direction:rtl already places the first item (Back) on the right.
   No row-reverse needed. */

/* Gold accent bars — flip border side */
[dir="rtl"] .mrd2-scope-note,
[dir="rtl"] .mrd2-interp-note,
.mrd2-app[dir="rtl"] .mrd2-scope-note,
.mrd2-app[dir="rtl"] .mrd2-interp-note {
  border-left:  none;
  border-right: 4px solid var(--mrd2-gold);
  padding-left: 0;
  padding-right: 1.25rem;
}

/* Flag alerts — flip red/amber accent bar */
[dir="rtl"] .mrd2-flag-alert,
.mrd2-app[dir="rtl"] .mrd2-flag-alert {
  border-left:  none;
  border-right: 4px solid var(--mrd2-red);
}

[dir="rtl"] .mrd2-flag-alert--watch,
.mrd2-app[dir="rtl"] .mrd2-flag-alert--watch {
  border-right-color: var(--mrd2-yellow-bd);
}

[dir="rtl"] .mrd2-advisory-note,
.mrd2-app[dir="rtl"] .mrd2-advisory-note {
  border-left:  none;
  border-right: 4px solid var(--mrd2-yellow-bd);
}

[dir="rtl"] .mrd2-review-idk-list,
.mrd2-app[dir="rtl"] .mrd2-review-idk-list {
  padding-left:  0;
  padding-right: 1.25rem;
}

/* Dim row gap bar */
[dir="rtl"] .mrd2-gap-item,
.mrd2-app[dir="rtl"] .mrd2-gap-item {
  border-left:  none;
  border-right: 3px solid var(--mrd2-border);
}

/* Action plan items — HTML is [number][text]; direction:rtl places number on
   the right naturally. No row-reverse needed. */

/* Optional/IDK labels */
[dir="rtl"] .mrd2-optional-label,
.mrd2-app[dir="rtl"] .mrd2-optional-label {
  margin-left:  0;
  margin-right: .3em;
}

[dir="rtl"] .mrd2-idk-label,
.mrd2-app[dir="rtl"] .mrd2-idk-label {
  margin-left:  0;
  margin-right: .4em;
}

/* Progress percent — sits on left in RTL */
[dir="rtl"] .mrd2-progress-pct,
.mrd2-app[dir="rtl"] .mrd2-progress-pct {
  text-align: left;
}

/* Arabic font sizes — Arabic script needs slightly larger sizes for readability */
[dir="rtl"] .mrd2-anchor__text,
.mrd2-app[dir="rtl"] .mrd2-anchor__text,
[dir="rtl"] .mrd2-action-text,
.mrd2-app[dir="rtl"] .mrd2-action-text {
  font-size: 1rem;
}

/* Checkboxes (consent + Step 1b) — HTML order is [checkbox][text].
   direction:rtl on the container already places the checkbox on the right
   (inline-start). No flex-direction override needed. */