/* ============================================================================
   AI READINESS DIAGNOSTIC, ROADMAP + ACTIONS (v2 extension)
   The personalised action plan and the three results actions. Depends on
   tokens.css + results-v2.css. Inherits the .gcard accordion vocabulary
   (left accent, RAG pill, 0fr→1fr expand) and the .reveal primitive.
   ========================================================================== */

/* ===========================================================================
   SECTION HEADERS , light separators in one continuous list
   ========================================================================= */
.rm-head { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-12) 0 var(--space-5); }
.rm-head:first-child { margin-top: var(--space-2); }
.rm-head__title {
  font-size: var(--fs-h3); font-weight: var(--w-extrabold); color: #fff;
  letter-spacing: var(--ls-heading); line-height: 1.15;
}
.rm-head__sub { font-size: var(--fs-sm); color: var(--ink-200); margin-top: var(--space-2); max-width: 60ch; line-height: 1.5; }
.rm-head__sub b { color: #fff; font-weight: var(--w-bold); }
/* the understated Circle Squared signal on the mandatory header */
.rm-head--mark .rm-head__mark { flex: none; width: 30px; height: 30px; display: grid; place-items: center; margin-top: 2px; }
.rm-head__markicon { width: 30px; height: 30px; color: var(--ink-100); }

/* the tier label (Do first / Do next) */
.rm-tier {
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-300);
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4);
}
.rm-tier::before { content: ""; width: 22px; height: 2px; background: var(--brand-red); flex: none; }
.rm-tier:first-of-type { margin-top: var(--space-2); }

/* ===========================================================================
   ROADMAP CARD , numbered, inline accordion (matches .gcard)
   ========================================================================= */
.rmcard {
  background: var(--ink-800); border: 1px solid var(--ink-600);
  border-left: 3px solid var(--_g, var(--brand-red)); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: var(--space-3);
}
.rmcard.is-mandatory { background: linear-gradient(180deg, var(--rag-low-soft), transparent 42%), var(--ink-800); }

.rmcard__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4);
  width: 100%; text-align: left; background: transparent; border: 0; color: inherit;
  font-family: var(--font-sans); padding: var(--space-5) var(--space-5);
  cursor: pointer; transition: background var(--dur-instant) var(--ease-out);
}
.rmcard__head:disabled { cursor: default; }
.rmcard__head:not(:disabled):hover { background: var(--ink-700); }

.rmcard__num {
  font-size: var(--fs-h2); font-weight: var(--w-extrabold); line-height: 1;
  color: var(--_rag, var(--brand-red)); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em; min-width: 1.6em;
}
.rmcard__main { min-width: 0; display: grid; gap: 6px; }
.rmcard__toprow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rmcard__mand { display: inline-flex; }
.rmcard__markicon { width: 15px; height: 15px; color: var(--ink-100); display: block; }
.rmcard__area { font-size: var(--fs-lead); font-weight: var(--w-bold); color: #fff; letter-spacing: -0.01em; }
.rmcard__rag {
  font-size: 10px; font-weight: var(--w-extrabold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--_rag); padding: 3px var(--space-2);
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--_rag) 16%, transparent);
}
.rmcard__line { font-size: var(--fs-sm); color: var(--ink-200); line-height: 1.5; max-width: 70ch; }
.rmcard__chev { color: var(--ink-300); transition: transform var(--dur-base) var(--ease-out); flex: none; }
.rmcard.is-open .rmcard__chev { transform: rotate(180deg); }

/* expand (0fr → 1fr, no fixed height) */
.rmcard__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-in-out); }
.rmcard.is-open .rmcard__body { grid-template-rows: 1fr; }
.rmcard__body > div { overflow: hidden; }
.rmcard__detail { padding: 0 var(--space-5) var(--space-6) calc(var(--space-5) + 1.6em + var(--space-4)); }
@media (max-width: 560px) { .rmcard__detail { padding-left: var(--space-5); } }

.rmcard__signal {
  font-style: italic; font-size: var(--fs-lead); color: #fff; font-weight: var(--w-medium);
  line-height: 1.5; margin: 0 0 var(--space-5); max-width: 62ch;
  padding-left: var(--space-4); border-left: 2px solid var(--_rag);
}
.rmcard__block { margin-bottom: var(--space-5); }
.rmcard__block:last-child { margin-bottom: 0; }
.rmcard__block h5 {
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-300); margin: 0 0 var(--space-2);
}
.rmcard__block p { margin: 0; color: var(--ink-100); line-height: var(--lh-relaxed); max-width: 64ch; }
.rmcard__needle { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); max-width: 64ch; }
.rmcard__needle li {
  position: relative; padding-left: var(--space-5); color: var(--ink-100); line-height: 1.55;
}
.rmcard__needle li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--_rag);
}
.rmcard__block--watch p { color: var(--ink-200); }
.rmcard__block--watch h5 { color: var(--rag-mid); }

/* ===========================================================================
   ONE-LINE ROWS , watch + good shape
   ========================================================================= */
.rm-list { display: grid; gap: 0; border: 1px solid var(--ink-600); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-800); }
.rmrow {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--ink-700);
}
.rmrow:first-child { border-top: 0; }
.rmrow__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--_rag); flex: none; }
.rmrow__area { font-size: var(--fs-sm); font-weight: var(--w-bold); color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
.rmrow__line { font-size: var(--fs-sm); color: var(--ink-200); line-height: 1.45; }
.rmrow--good .rmrow__area { color: var(--ink-100); }
@media (max-width: 560px) {
  .rmrow { grid-template-columns: auto 1fr; }
  .rmrow__line { grid-column: 1 / -1; padding-left: calc(10px + var(--space-3)); }
}

/* ===========================================================================
   THE THREE ACTIONS , replaces the old "What next?"
   ========================================================================= */
.rm-actions { display: grid; gap: var(--space-4); }
.actcard {
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-xl);
  padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start;
  box-sizing: border-box; min-width: 0;
}
.actcard h4, .actcard p { min-width: 0; overflow-wrap: anywhere; }
.actcard h4 { font-size: var(--fs-lead); font-weight: var(--w-bold); color: #fff; margin: 0; letter-spacing: -0.01em; }
.actcard p { font-size: var(--fs-sm); color: var(--ink-200); margin: 0; line-height: 1.55; }
.actcard p b { color: #fff; font-weight: var(--w-semibold); }
.actcard .btn { margin-top: var(--space-2); justify-self: start; }

/* primary , download card with indicative thumbnail.
   Mobile: stack thumbnail above body. Desktop (>=520px): side by side. */
.actcard--primary {
  border-color: var(--ink-500);
  background: radial-gradient(120% 140% at 100% 0%, #16203a 0%, var(--ink-800) 60%);
  grid-template-columns: 1fr; align-items: center; gap: var(--space-5);
}
@media (min-width: 520px) {
  .actcard--primary { grid-template-columns: auto 1fr; gap: var(--space-6); }
}
.actcard--primary .actcard__body { display: grid; gap: var(--space-3); min-width: 0; }
.actcard__thumb { flex: none; }
.rcardmini {
  width: 132px; aspect-ratio: 1080 / 1350; border-radius: var(--radius-md);
  background: linear-gradient(165deg, #11182b, var(--ink-1000)); border: 1px solid var(--ink-500);
  padding: var(--space-4) var(--space-3); display: grid; align-content: space-between;
  box-shadow: var(--shadow-lg);
}
.rcardmini__top { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: var(--w-bold); color: #fff; letter-spacing: 0.04em; }
.rcardmini__mark { width: 13px; height: 13px; color: var(--brand-red); }
.rcardmini__lvl { font-size: 17px; font-weight: var(--w-extrabold); color: #fff; letter-spacing: -0.02em; line-height: 1; }
.rcardmini__dots { display: flex; gap: 5px; }
.rcardmini__dots i { width: 11px; height: 11px; border-radius: 50%; }
.rcardmini__dots i.is-low { background: var(--rag-low); }
.rcardmini__dots i.is-mid { background: var(--rag-mid); }
.rcardmini__dots i.is-high { background: var(--rag-high); }

.rm-actions__pair { display: grid; gap: var(--space-4); }
.actcard--soft { background: transparent; border-style: dashed; }
.actcard__mail { color: var(--brand-red); font-weight: var(--w-bold); font-size: var(--fs-sm); text-decoration: none; margin-top: var(--space-1); justify-self: start; }
.actcard__mail:hover { text-decoration: underline; }
.actcard__done { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--rag-high); }
.actcard.is-done { border-color: color-mix(in srgb, var(--rag-high) 40%, var(--ink-600)); }

@media (min-width: 760px) {
  .rm-actions__pair { grid-template-columns: 1fr 1fr; }
}

/* gentle stagger handled by .reveal in roadmap-render.js */