/* ═══════════════════════════════════════════════════════════════════════════
   vo-maturity-guide.css — the "what would a 4 look like here?" panel.

   Shared by every functional playbook, so it uses the VisionOne brand tokens with fallbacks
   rather than any one app's variables — an app that has not loaded visionone-brand.css still
   renders something readable rather than black-on-black.

   The colour carries meaning and is not decoration: a level BELOW what the strategy needs is
   amber, the level AT it is green, and a level BEYOND it is deliberately muted rather than
   celebrated. That last one is the whole argument — "5 is not the goal" has to be visible at a
   glance or the panel just becomes a longer way of saying more is better.
   ═══════════════════════════════════════════════════════════════════════════ */

.vo-mg-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(15, 23, 42, .46);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 5vh, 60px) 16px;
  overflow-y: auto;
}
.vo-mg-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--vo-surface, #fff);
  color: var(--vo-ink, #16233a);
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .06);
  padding: 22px 24px 20px;
  font-family: var(--vo-font-body, inherit);
}
.vo-mg-close {
  position: absolute; top: 10px; right: 12px;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--vo-ink-soft, #64748b);
  padding: 4px 8px; border-radius: 6px;
}
.vo-mg-close:hover { background: var(--vo-canvas, #f1f5f2); color: var(--vo-ink, #16233a); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.vo-mg-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vo-ink-soft, #64748b); margin-right: 34px;
}
.vo-mg-crit {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--vo-red, #c73127); color: #fff; letter-spacing: .04em;
}
.vo-mg-stmt {
  font-size: 17px; font-weight: 650; line-height: 1.35; margin: 8px 0 12px;
  max-width: 62ch;
}
.vo-mg-k {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--vo-ink-soft, #64748b); margin-bottom: 2px;
}
/* The scoring distinction. Given the most visual weight of anything in the header because it is
   the sentence that makes two consultants score the same client the same way. */
.vo-mg-moves {
  background: var(--vo-blue-tint, #e8f0f8);
  border-left: 3px solid var(--vo-blue, #2f6f9f);
  padding: 9px 12px; border-radius: 0 6px 6px 0;
  font-size: 13.4px; line-height: 1.5; margin-bottom: 10px; max-width: 76ch;
}
.vo-mg-ev, .vo-mg-target {
  font-size: 12.6px; line-height: 1.5; color: var(--vo-ink-soft, #64748b);
  margin-bottom: 9px; max-width: 76ch;
}
.vo-mg-target {
  background: var(--vo-canvas, #f1f5f2); padding: 9px 12px; border-radius: 6px;
  color: var(--vo-ink, #16233a);
}

/* ── The five levels ────────────────────────────────────────────────────── */
.vo-mg-levels { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.vo-mg-level {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 11px 13px; border-radius: 9px;
  border: 1px solid var(--vo-border, #dbe3dd);
  background: var(--vo-surface, #fff);
  font-family: inherit; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.vo-mg-level:hover { border-color: var(--vo-ink-soft, #64748b); box-shadow: 0 3px 10px rgba(15,23,42,.07); }
.vo-mg-level:active { transform: translateY(1px); }
.vo-mg-level:focus-visible { outline: 2px solid var(--vo-blue, #2f6f9f); outline-offset: 2px; }

.vo-mg-num {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 16px; font-weight: 700;
  background: var(--vo-canvas, #f1f5f2); color: var(--vo-ink-soft, #64748b);
}
.vo-mg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vo-mg-name { font-size: 14px; font-weight: 650; line-height: 1.3; }
.vo-mg-rel {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--vo-ink-soft, #64748b);
}
.vo-mg-you {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: var(--vo-ink, #16233a); color: #fff;
}
.vo-mg-anchor { font-size: 13.2px; line-height: 1.5; color: var(--vo-ink, #16233a); }
.vo-mg-req, .vo-mg-fail, .vo-mg-sec {
  font-size: 12.4px; line-height: 1.5; padding: 6px 9px; border-radius: 5px; margin-top: 2px;
}
.vo-mg-req { background: var(--vo-green-tint, #e7efe2); color: var(--vo-green-dark, #4d7a40); }
.vo-mg-fail { background: rgba(199, 49, 39, .07); color: var(--vo-red, #c73127); }
.vo-mg-sec { background: var(--vo-blue-tint, #e8f0f8); color: var(--vo-blue-dark, #245b85); }

/* Relation colour. `at` is the answer, so it is the only one that gets the green treatment;
   `above` is deliberately quiet, because the point of the panel is that more is not better. */
.vo-mg-level.rel-at { border-color: var(--vo-green, #649954); background: rgba(100, 153, 84, .04); }
.vo-mg-level.rel-at .vo-mg-num { background: var(--vo-green, #649954); color: #fff; }
.vo-mg-level.rel-below .vo-mg-num { background: rgba(214, 158, 46, .18); color: #8a6116; }
.vo-mg-level.rel-above { opacity: .78; }
.vo-mg-level.is-current { box-shadow: inset 0 0 0 2px var(--vo-ink, #16233a); }

.vo-mg-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vo-border, #dbe3dd);
  font-size: 12.4px; line-height: 1.55; color: var(--vo-ink-soft, #64748b); max-width: 80ch;
}

@media (max-width: 640px) {
  .vo-mg-panel { padding: 18px 15px 16px; }
  .vo-mg-stmt { font-size: 15.5px; }
  .vo-mg-level { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 9px 10px; }
  .vo-mg-num { width: 28px; height: 28px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vo-mg-level { transition: none; }
  .vo-mg-level:active { transform: none; }
}