/* Strategic Playbook — interactivity enhancements:
 * always-visible right-side scrollbars, voice-dictation buttons, and the
 * AI facilitator panel. Loaded LAST so it wins the cascade, and uses high
 * specificity + !important to override topnav.js's global scrollbar-hide. */

/* ── Always show a right-side scrollbar on every screen ─────────── *
 * The PAGE (body) scrolls; the main content must NOT cap its own height or the
 * bottom gets clipped. Generous bottom padding clears the fold. */
/* App shell: the MAIN content pane scrolls with an always-visible right-side
 * scrollbar; the page itself does not scroll. Height is set precisely by JS
 * (fitMain) so it works regardless of the top-nav height. */
html, html body { height: 100%; overflow: hidden !important; }
html body .sp-frame { overflow: hidden !important; }
html body .sp-main {
  overflow-y: scroll !important;
  max-height: none !important;
  box-sizing: border-box !important;   /* JS sets height = innerHeight − top; padding must live INSIDE it, not extend past the viewport */
  padding-bottom: 110px;
  scrollbar-width: auto !important;
  scrollbar-color: var(--vo-green) var(--vo-green-tint) !important;
}
html body .sp-main::-webkit-scrollbar {
  width: 14px !important; display: block !important; -webkit-appearance: none !important; background: var(--vo-green-tint) !important;
}
html body .sp-main::-webkit-scrollbar-thumb {
  background: var(--vo-green) !important; border-radius: 7px !important; border: 3px solid var(--vo-green-tint) !important; min-height: 48px !important;
}
html body .sp-main::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark) !important; }
html body .sp-sidebar { scrollbar-width: thin !important; scrollbar-color: var(--vo-green) var(--vo-green-tint) !important; }
html body .sp-sidebar {
  scrollbar-width: thin !important;
  scrollbar-color: var(--vo-green) var(--vo-green-tint) !important;
}
html body .sp-main::-webkit-scrollbar,
html body .sp-sidebar::-webkit-scrollbar,
html body::-webkit-scrollbar {
  width: 12px !important;
  display: block !important;
  -webkit-appearance: none !important;
  background: var(--vo-green-tint) !important;
}
html body .sp-main::-webkit-scrollbar-thumb,
html body .sp-sidebar::-webkit-scrollbar-thumb,
html body::-webkit-scrollbar-thumb {
  background: var(--vo-green) !important;
  border: 2px solid var(--vo-green-tint) !important;
  border-radius: 7px !important;
  min-height: 48px !important;
}
html body .sp-main::-webkit-scrollbar-thumb:hover,
html body::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark) !important; }

/* ── Voice dictation (mic sits at the top-right of any field) ───── */
.sp-mic-field { position: relative; display: block; width: 100%; }
.sp-mic-field textarea, .sp-mic-field input { width: 100%; box-sizing: border-box; padding-right: 38px; }
.sp-bullet-row .sp-mic-field { flex: 1; }
.sp-mic {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--vo-border); background: #fff; color: var(--vo-ink-soft);
  cursor: pointer; font-size: 13px; line-height: 1; display: flex;
  align-items: center; justify-content: center; z-index: 2; padding: 0;
  transition: all .15s ease;
}
.sp-mic:hover { border-color: var(--vo-green); color: var(--vo-green); }
.sp-mic.listening {
  background: var(--vo-red); color: #fff; border-color: var(--vo-red);
  animation: sp-pulse 1.1s infinite;
}
@keyframes sp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(199,49,39,.5); } 50% { box-shadow: 0 0 0 6px rgba(199,49,39,0); } }

/* ── About-this-section callout ─────────────────────────────────── */
.sp-about {
  border-left: 4px solid var(--vo-purple); background: #f7f4fb;
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 12px 0 18px;
}
.sp-about-label {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--vo-purple); margin-bottom: 4px;
}
.sp-about p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--vo-ink); }

/* ── Bullet-list cells (SWOT / PESTLE) ──────────────────────────── */
.sp-bullets { margin: 4px 0; }
.sp-bullet-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.sp-bullet-dot { color: var(--vo-green); font-weight: 700; flex: 0 0 auto; }
.sp-bullet-input { flex: 1; padding: 6px 8px; border: 1px solid var(--vo-border); border-radius: 6px; font-size: 13px; font-family: var(--vo-font-body); }
.sp-bullet-del { border: 0; background: transparent; color: var(--vo-ink-soft); cursor: pointer; font-size: 12px; flex: 0 0 auto; }
.sp-bullet-del:hover { color: var(--vo-red); }
.sp-bullet-add { margin-top: 4px; border: 1px dashed var(--vo-border); background: #fff; color: var(--vo-ink-soft); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.sp-bullet-add:hover { border-color: var(--vo-green); color: var(--vo-green-dark); }

/* ── Business Model Canvas — per-segment tabs ───────────────────── */
.sp-bmc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.sp-bmc-tab {
  border: 1px solid var(--vo-border); background: #fff; color: var(--vo-ink-soft);
  border-radius: 18px; padding: 5px 14px; font-size: 13px; cursor: pointer; font-family: var(--vo-font-body);
}
.sp-bmc-tab:hover { border-color: var(--vo-green); }
.sp-bmc-tab.active { background: var(--vo-green); color: #fff; border-color: var(--vo-green); font-weight: 700; }

/* ── Table-widgets (Scorecard, KPI, RACI, Risks, Initiatives, Comms) ── */
.sp-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; }
.sp-tbl th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vo-ink-soft); padding: 6px 6px; border-bottom: 2px solid var(--vo-border); }
.sp-tbl td { padding: 4px 6px; vertical-align: middle; }
.sp-tbl input, .sp-tbl select { width: 100%; padding: 6px 8px; border: 1px solid var(--vo-border);
  border-radius: 6px; font-size: 13px; font-family: var(--vo-font-body); background: #fff; box-sizing: border-box; }
.sp-tbl .sp-mic-field { width: 100%; }

/* ── Strategy Map (cause-and-effect lanes) ──────────────────────── */
.sp-smap { display: flex; gap: 10px; margin: 12px 0; align-items: stretch; }
.sp-smap-flow {
  flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--vo-green-tint), #fff); border-radius: 8px; padding: 8px 2px;
}
.sp-smap-arrow { color: var(--vo-green); font-size: 20px; line-height: 1; }
.sp-smap-flow-txt { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vo-green-dark); }
.sp-smap-lanes { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sp-smap-lane { display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid var(--vo-border); border-left: 6px solid var(--vo-gray); border-radius: 10px; padding: 12px; }
.sp-smap-lane.fin { border-left-color: var(--vo-green); }
.sp-smap-lane.cust { border-left-color: var(--vo-blue); }
.sp-smap-lane.proc { border-left-color: var(--vo-purple); }
.sp-smap-lane.learn { border-left-color: var(--vo-yellow); }
.sp-smap-lane-label { flex: 0 0 150px; }
.sp-smap-lane-label strong { font-family: var(--vo-font-heading); font-size: 14px; }
.sp-smap-lane-sub { font-size: 11px; color: var(--vo-ink-soft); margin-top: 2px; }
.sp-smap-cardscol { flex: 1; }
.sp-smap-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-smap-card { display: flex; align-items: center; gap: 4px; background: var(--vo-green-tint);
  border: 1px solid var(--vo-border); border-radius: 8px; padding: 2px 6px 2px 10px; }
.sp-smap-input { border: 0; background: transparent; font-size: 13px; font-family: var(--vo-font-body); min-width: 150px; padding: 5px 0; }
.sp-smap-card .sp-mic-field { width: auto; }
.sp-smap-del { border: 0; background: transparent; color: var(--vo-ink-soft); cursor: pointer; font-size: 11px; }
.sp-smap-del:hover { color: var(--vo-red); }
.sp-smap-add { margin-top: 8px; border: 1px dashed var(--vo-border); background: #fff; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--vo-ink-soft); }
.sp-smap-add:hover { border-color: var(--vo-green); color: var(--vo-green-dark); }

/* ── Competitive Advantage Venn (SVG, matches the VisionOne PPT) ─── */
.sp-venn-wrap { display: flex; justify-content: center; overflow-x: auto; margin: 8px 0 4px; }
.sp-venn-svg { width: 100%; max-width: 580px; height: auto; display: block; }
.sp-venn-t { font-family: var(--vo-font-body); font-size: 13px; font-weight: 700; fill: var(--vo-ink); }
.sp-venn-lbl { font-family: var(--vo-font-body); font-size: 12px; font-style: italic; fill: #333; }

/* ── Balanced Scorecard (Strategic Perspectives) ────────────────── */
.sp-bsc { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 14px 0; }
.sp-bsc-cell { background: #fff; border: 1px solid var(--vo-border); border-top: 4px solid var(--vo-gray); border-radius: 10px; padding: 12px; }
.sp-bsc-cell.fin { border-top-color: var(--vo-green); }
.sp-bsc-cell.cust { border-top-color: var(--vo-blue); }
.sp-bsc-cell.proc { border-top-color: var(--vo-purple); }
.sp-bsc-cell.learn { border-top-color: var(--vo-yellow); }
.sp-bsc-label { font-family: var(--vo-font-heading); font-size: 14px; font-weight: 700; }
.sp-bsc-q { font-size: 11px; color: var(--vo-ink-soft); margin-bottom: 6px; }
.sp-bsc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--vo-green); color: #fff; border-radius: 50%; width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--vo-font-heading); font-size: 12px; font-weight: 700; z-index: 2;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); padding: 8px; box-sizing: border-box; }

/* ── Sources box + rollup ───────────────────────────────────────── */
.sp-src-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--vo-border); }
.sp-src-box .sp-w-input { min-height: 56px; }
.sp-rollup { margin: 8px 0; }

/* ── Interactive 2×2 matrix (Stakeholder Map, etc.) ─────────────── */
.sp-mtx { position: relative; padding: 22px 20px 22px 30px; margin: 8px 0; }
.sp-mtx-axis { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vo-ink-soft); }
.sp-mtx-axis.top { top: 2px; left: 50%; transform: translateX(-50%); }
.sp-mtx-axis.bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
.sp-mtx-axis.left { left: -6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left; white-space: nowrap; }
.sp-mtx-axis.right { right: -10px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right; white-space: nowrap; }
.sp-mtx-cells { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 340px; }
.sp-mtx-cell { border: 1px solid var(--vo-border); border-radius: 10px; background: #fff; padding: 10px; display: flex; flex-direction: column; }
.sp-mtx-cell.tl { grid-area: 1 / 1; } .sp-mtx-cell.tr { grid-area: 1 / 2; } .sp-mtx-cell.bl { grid-area: 2 / 1; } .sp-mtx-cell.br { grid-area: 2 / 2; }
.sp-mtx-cell.sp-mtx-hl { background: var(--vo-green-tint); border-color: var(--vo-green); }
.sp-mtx-qtitle { font-family: var(--vo-font-heading); font-size: 13px; font-weight: 700; }
.sp-mtx-qdesc { font-size: 11px; color: var(--vo-ink-soft); margin-bottom: 6px; }
.sp-mtx-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.sp-mtx-chip { background: var(--vo-blue-tint); border-radius: 16px; padding: 3px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; height: fit-content; }
.sp-mtx-chip button { border: 0; background: transparent; color: var(--vo-ink-soft); cursor: pointer; font-size: 11px; padding: 0; }
.sp-mtx-chip button:hover { color: var(--vo-red); }
.sp-mtx-add { margin-top: 8px; width: 100%; padding: 5px 8px; border: 1px dashed var(--vo-border); border-radius: 6px; font-size: 12px; box-sizing: border-box; }
.sp-mtx-add:focus { outline: none; border-color: var(--vo-green); border-style: solid; }

/* ── Maturity stepper (1–5 progression) ─────────────────────────── */
.sp-mat { margin: 10px 0; }
.sp-mat-label { font-size: 12px; font-weight: 700; color: var(--vo-ink-soft); margin-bottom: 4px; }
.sp-mat-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-mat-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 82px;
  border: 1px solid var(--vo-border); background: #fff; border-radius: 8px; padding: 6px 8px; cursor: pointer;
  font-weight: 700; color: var(--vo-ink-soft); font-family: var(--vo-font-body); font-size: 14px; transition: all .12s ease; }
.sp-mat-pill .sp-mat-name { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sp-mat-pill.filled { background: var(--vo-green-tint); border-color: var(--vo-green); color: var(--vo-green-dark); }
.sp-mat-pill.active { background: var(--vo-green); color: #fff; border-color: var(--vo-green); box-shadow: 0 2px 6px rgba(100,153,84,.35); }

/* ── Guided walk-through bar ────────────────────────────────────── */
.sp-guidebar { position: sticky; top: 0; z-index: 20; background: #fff; border: 1px solid var(--vo-green);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.sp-guidebar-top { display: flex; align-items: center; gap: 12px; }
.sp-guidebar-step { font-size: 12px; font-weight: 800; color: var(--vo-green-dark); letter-spacing: .04em; }
.sp-guidebar-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--vo-ink-soft); }
.sp-guidebar-exit { margin-left: auto; border: 0; background: transparent; color: var(--vo-ink-soft); cursor: pointer; font-size: 12px; }
.sp-guidebar-exit:hover { color: var(--vo-red); }
.sp-guidebar-title { font-family: var(--vo-font-heading); font-size: 18px; margin: 4px 0 8px; }
.sp-guidebar-prog { height: 6px; background: var(--vo-green-tint); border-radius: 4px; overflow: hidden; }
.sp-guidebar-prog span { display: block; height: 100%; background: var(--vo-green); transition: width .25s ease; }
.sp-guidebar-nav { display: flex; gap: 8px; margin-top: 10px; }

/* ── Executive Dashboard hero ───────────────────────────────────── */
.sp-hero { background: linear-gradient(180deg, var(--vo-green-tint), #fff); border: 1px solid var(--vo-border);
  border-radius: 14px; padding: 18px 20px; margin: 0 0 22px; }
.sp-hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-hero-cta .sp-ai-btn { font-size: 14px; padding: 10px 18px; }
.sp-hero-eshead { display: flex; align-items: center; gap: 12px; }
.sp-hero-eshead h3 { margin: 0; font-family: var(--vo-font-heading); }
.sp-hero-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0; }
.sp-hero-tile { background: #fff; border: 1px solid var(--vo-border); border-top: 3px solid var(--vo-green); border-radius: 10px; padding: 12px; }
.sp-hero-tile-label { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vo-ink-soft); margin-bottom: 6px; }
.sp-hero-tile-val { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.sp-hero-tile-val.empty { color: var(--vo-ink-soft); font-style: italic; }
.sp-hero-bet { display: flex; align-items: center; gap: 12px; background: var(--vo-ink); color: #fff; border-radius: 10px; padding: 12px 16px; margin: 10px 0; }
.sp-hero-bet-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--vo-yellow); color: var(--vo-ink); padding: 3px 8px; border-radius: 12px; flex: 0 0 auto; }
.sp-hero-bet-val { font-family: var(--vo-font-heading); font-size: 15px; }
.sp-hero-snap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sp-snap-badge { background: #fff; border: 1px solid var(--vo-border); border-radius: 10px; padding: 8px 14px; min-width: 120px; }
.sp-snap-badge.primary { border-left: 4px solid var(--vo-green); }
.sp-snap-badge.secondary { border-left: 4px solid var(--vo-blue); }
.sp-snap-badge.phase { border-left: 4px solid var(--vo-purple); }
.sp-snap-badge.pct { border-left: 4px solid var(--vo-yellow); }
.sp-snap-badge.status { border-left: 4px solid var(--vo-gray); }
.sp-snap-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--vo-ink-soft); }
.sp-snap-val { font-family: var(--vo-font-heading); font-size: 15px; }
@media (max-width: 900px) { .sp-hero-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ── Deck-style section eyebrow (SECTION 0X — GROUP) ────────────── */
.sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 14px 4px 4px; border-radius: 22px; background: var(--vo-green-tint); }
.sp-eyebrow-num { color: #fff; font-family: var(--vo-font-heading); font-weight: 700; font-size: 12px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--vo-green); }
.sp-eyebrow-group { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vo-ink-soft); }
.sp-eyebrow.g0 { background: rgba(100,153,84,.16); } .sp-eyebrow.g0 .sp-eyebrow-num { background: var(--vo-green); }
.sp-eyebrow.g1 { background: rgba(0,129,183,.13); } .sp-eyebrow.g1 .sp-eyebrow-num { background: var(--vo-blue); }
.sp-eyebrow.g2 { background: rgba(116,81,154,.13); } .sp-eyebrow.g2 .sp-eyebrow-num { background: var(--vo-purple); }
.sp-eyebrow.g3 { background: rgba(235,212,23,.22); } .sp-eyebrow.g3 .sp-eyebrow-num { background: #b9a80f; }
.sp-eyebrow.g4 { background: rgba(199,49,39,.12); } .sp-eyebrow.g4 .sp-eyebrow-num { background: var(--vo-red); }
.sp-eyebrow.g5 { background: var(--vo-gray); } .sp-eyebrow.g5 .sp-eyebrow-num { background: var(--vo-ink-soft); }

/* ── Customer Journey stage flow ────────────────────────────────── */
.sp-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 12px 0; }
.sp-flow-stage { flex: 1 1 150px; min-width: 150px; background: #fff; border: 1px solid var(--vo-border); border-top: 3px solid var(--vo-blue); border-radius: 10px; padding: 10px; }
.sp-flow-head { display: flex; align-items: center; gap: 6px; }
.sp-flow-num { background: var(--vo-blue); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.sp-flow-label { font-family: var(--vo-font-heading); font-weight: 700; font-size: 13px; }
.sp-flow-hint { font-size: 10px; color: var(--vo-ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 3px 0 6px; }
.sp-flow-arrow { display: flex; align-items: center; color: var(--vo-blue); font-size: 18px; font-weight: 700; flex: 0 0 auto; }
@media (max-width: 900px) { .sp-flow-arrow { display: none; } .sp-flow-stage { flex-basis: 100%; } }

/* ── Introduction page ──────────────────────────────────────────── */
.sp-intro-p { font-size: 14px; line-height: 1.6; margin: 0; }
.sp-intro-list { margin: 6px 0 0 18px; font-size: 14px; line-height: 1.55; }
.sp-intro-list li { margin: 4px 0; }
.sp-intro-gvb { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-intro-col { border-radius: 10px; padding: 12px; }
.sp-intro-col.good { background: var(--vo-green-tint); border: 1px solid var(--vo-green); }
.sp-intro-col.bad { background: #fbe9e7; border: 1px solid var(--vo-red); }
.sp-intro-col h4 { margin: 0 0 6px; font-family: var(--vo-font-heading); }
@media (max-width: 800px) { .sp-intro-gvb { grid-template-columns: 1fr; } }

/* ── Best-practice tips panel ───────────────────────────────────── */
.sp-tips { margin: 8px 0 12px; border: 1px solid var(--vo-blue); border-radius: 10px; background: var(--vo-blue-tint); padding: 6px 12px; }
.sp-tips summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--vo-blue-dark); }
.sp-tips ul { margin: 8px 0 6px 18px; font-size: 13px; line-height: 1.5; }
.sp-tips li { margin: 3px 0; }

/* ── AI examples list ───────────────────────────────────────────── */
.sp-ex-list { margin: 4px 0 0 18px; } .sp-ex-list li { margin: 5px 0; font-size: 13px; line-height: 1.5; }

/* ── Guidance callout (yellow) ──────────────────────────────────── */
.sp-guidance { border-left: 4px solid var(--vo-yellow); background: #fdf9e3; border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 10px 0 14px; }
.sp-guidance-label { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a7c0a; margin-bottom: 4px; }
.sp-guidance p { margin: 0; font-size: 13px; line-height: 1.5; }

/* ── Balanced Scorecard sub-categories ──────────────────────────── */
.sp-bsc { gap: 14px; }
.sp-bsc-sub { margin-top: 8px; }
.sp-bsc-sublabel { font-size: 11px; font-weight: 700; color: var(--vo-ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.sp-bsc-input { width: 100%; min-height: 40px; padding: 6px 8px; border: 1px solid var(--vo-border); border-radius: 6px; font-size: 12px; font-family: var(--vo-font-body); box-sizing: border-box; resize: vertical; margin-top: 2px; }

/* ── Appendix ───────────────────────────────────────────────────── */
.sp-appx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sp-appx-head strong { font-family: var(--vo-font-heading); font-size: 16px; }
.sp-appx-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vo-ink-soft); margin: 12px 0 4px; }
.sp-appx-link { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.sp-appx-link a { color: var(--vo-blue-dark); font-size: 13px; }
.sp-appx-addlink { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sp-appx-addlink input { padding: 6px 8px; border: 1px solid var(--vo-border); border-radius: 6px; font-size: 12px; }
.sp-appx-addlink input[type=url] { flex: 1; min-width: 180px; }

/* ── Business Model Canvas summary (populated, canvas layout) ────── */
.sp-bmcsum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0;
  grid-template-areas: "kp ka vp cr cs" "kp kr vp ch cs" "cost cost rev rev rev"; }
.sp-bmcsum-cell { border: 1px solid var(--vo-border); border-radius: 8px; background: #fff; padding: 8px 10px; min-height: 84px; }
.sp-bmcsum-label { font-family: var(--vo-font-heading); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 5px; color: var(--vo-green-dark); }
.sp-bmcsum-edit { border: 0; background: transparent; cursor: pointer; color: var(--vo-ink-soft); font-size: 12px; padding: 0 2px; }
.sp-bmcsum-edit:hover { color: var(--vo-green); }
.sp-bmcsum-line { font-size: 11px; line-height: 1.4; padding: 1px 0; }
.sp-bmcsum-line::before { content: "• "; color: var(--vo-green); }
.sp-bmcsum-empty { font-size: 11px; color: var(--vo-gray); font-style: italic; }
.sp-bmcsum-src { font-size: 9.5px; color: var(--vo-ink-soft); font-style: italic; margin-top: 4px; opacity: .8; }

/* Organizational Maturity Model — ladder + detail */
.sp-matladder { display: flex; align-items: stretch; gap: 0; margin: 16px 0 4px; flex-wrap: nowrap; }
.sp-matladder-stage { flex: 1 1 0; min-width: 0; border: 1.5px solid var(--vo-border); border-radius: 10px; padding: 10px 12px; background: #fff; position: relative; }
.sp-matladder-stage.filled { background: var(--vo-green-tint); border-color: var(--vo-green); }
.sp-matladder-stage.is-current { box-shadow: 0 0 0 2px var(--vo-green) inset; }
.sp-matladder-stage.is-target { box-shadow: 0 0 0 2px #cc7a2b inset; }
.sp-matladder-head { display: flex; align-items: center; gap: 6px; }
.sp-matladder-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vo-green); color: #fff; font-size: 11px; font-weight: 700; }
.sp-matladder-name { font-family: var(--vo-font-heading); font-weight: 700; font-size: 13px; color: var(--vo-ink); }
.sp-matladder-tag { font-size: 11px; color: var(--vo-ink-soft); margin-top: 4px; }
.sp-matladder-flag { display: inline-block; margin-top: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: .5px; padding: 2px 6px; border-radius: 8px; }
.sp-matladder-flag.cur { background: var(--vo-green); color: #fff; }
.sp-matladder-flag.tgt { background: #cc7a2b; color: #fff; }
.sp-matladder-arrow { display: flex; align-items: center; padding: 0 6px; color: var(--vo-blue); font-weight: 700; flex: 0 0 auto; }
.sp-matdetail { margin-top: 14px; }
.sp-matdetail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-matdetail-card { border: 1px solid var(--vo-border); border-radius: 10px; padding: 12px 14px; }
.sp-matdetail-card.cur { border-left: 4px solid var(--vo-green); }
.sp-matdetail-card.tgt { border-left: 4px solid #cc7a2b; }
.sp-matdetail-card p { font-size: 12.5px; line-height: 1.5; color: var(--vo-ink); margin: 4px 0 0; }
.sp-matdetail-h { font-family: var(--vo-font-heading); font-weight: 700; font-size: 13px; color: var(--vo-green-dark); }
.sp-matdetail-adv, .sp-matdetail-align { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--vo-green-tint); }
.sp-matdetail-align p { font-size: 12.5px; line-height: 1.5; color: var(--vo-ink); margin: 4px 0 8px; }
@media (max-width: 720px) { .sp-matladder { flex-wrap: wrap; } .sp-matladder-arrow { display: none; } .sp-matladder-stage { flex-basis: 100%; margin-bottom: 6px; } .sp-matdetail-grid { grid-template-columns: 1fr; } }

/* Assess → Align → Apply graphic (Introduction) */
.sp-aaa { margin: 2px 0; }
.sp-aaa-row { display: flex; align-items: stretch; flex-wrap: nowrap; }
.sp-aaa-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1.5px solid var(--vo-border); border-radius: 12px; overflow: hidden; background: #fff; }
.sp-aaa-body { padding: 16px 16px 12px; font-size: 13.5px; line-height: 1.5; color: var(--vo-ink); flex: 1; }
.sp-aaa-p { margin: 0 0 8px; }
.sp-aaa-label { text-align: center; font-family: var(--vo-font-heading); font-weight: 700; font-size: 22px; color: #fff; padding: 9px 8px; }
.sp-aaa-card.assess { border-color: var(--vo-red); }
.sp-aaa-card.assess .sp-aaa-label { background: var(--vo-red); }
.sp-aaa-card.align { border-color: #cfae00; }
.sp-aaa-card.align .sp-aaa-label { background: var(--vo-yellow); color: var(--vo-ink); }
.sp-aaa-card.apply { border-color: var(--vo-green); }
.sp-aaa-card.apply .sp-aaa-label { background: var(--vo-green); }
.sp-aaa-arrow { display: flex; align-items: center; padding: 0 10px; font-size: 26px; color: var(--vo-blue); font-weight: 700; flex: 0 0 auto; }
.sp-aaa-loop { margin-top: 12px; text-align: center; font-size: 12.5px; font-style: italic; color: var(--vo-ink-soft); display: flex; align-items: center; justify-content: center; gap: 8px; }
.sp-aaa-loop-arrow { color: var(--vo-blue); font-size: 18px; font-weight: 700; }
@media (max-width: 720px) { .sp-aaa-row { flex-wrap: wrap; } .sp-aaa-arrow { display: none; } .sp-aaa-card { flex-basis: 100%; margin-bottom: 8px; } }
.sp-bmc-copyright { font-size: 10px; color: var(--vo-ink-soft); margin-top: 14px; font-style: italic; line-height: 1.4; }
.sp-bmcsum-cell.lens-des { border-top: 3px solid var(--vo-green); }
.sp-bmcsum-cell.lens-feas { border-top: 3px solid var(--vo-blue); }
.sp-bmcsum-cell.lens-via { border-top: 3px solid #b9a80f; }
.sp-bmc-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 11px; }
.sp-bmc-legkey { padding-left: 15px; position: relative; color: var(--vo-ink-soft); }
.sp-bmc-legkey::before { content: ''; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 2px; }
.sp-bmc-legkey.lens-des::before { background: var(--vo-green); }
.sp-bmc-legkey.lens-feas::before { background: var(--vo-blue); }
.sp-bmc-legkey.lens-via::before { background: #b9a80f; }
@media (max-width: 1000px) {
  .sp-bmcsum { grid-template-columns: 1fr 1fr; grid-template-areas: "kp ka" "kr vp" "cr ch" "cs cs" "cost cost" "rev rev"; }
}

/* ── AI facilitator panel ───────────────────────────────────────── */
.sp-ai-panel {
  border: 1px solid var(--vo-blue); border-radius: 12px;
  background: linear-gradient(180deg, var(--vo-blue-tint), #fff);
  padding: 16px 18px; margin: 18px 0;
}
.sp-ai-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-ai-head strong { font-family: var(--vo-font-heading); color: var(--vo-blue-dark); font-size: 15px; }
.sp-ai-badge {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  background: var(--vo-blue); color: #fff; padding: 2px 8px; border-radius: 20px;
}
.sp-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-ai-btn {
  border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-family: var(--vo-font-body); font-weight: 700; font-size: 13px;
  background: var(--vo-blue); color: #fff;
}
.sp-ai-btn.ghost { background: #fff; color: var(--vo-blue-dark); border: 1px solid var(--vo-blue); }
.sp-ai-btn:disabled { opacity: .6; cursor: default; }
.sp-ai-out { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.sp-ai-out h4 { font-family: var(--vo-font-heading); margin: 12px 0 4px; color: var(--vo-ink); font-size: 13px; }
.sp-ai-out ul { margin: 4px 0 0 18px; padding: 0; }
.sp-ai-out li { margin: 3px 0; }
.sp-ai-coaching { background: #fff; border-left: 3px solid var(--vo-blue); padding: 8px 12px; border-radius: 4px; }
.sp-ai-watch li { color: var(--vo-red); }
.sp-ai-note { font-size: 12px; color: var(--vo-ink-soft); margin-top: 8px; }

/* ── Alignment diagnostic (dashboard) ───────────────────────────── */
.sp-diag { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.sp-diag-score {
  width: 84px; height: 84px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; background: var(--vo-green); flex: 0 0 auto;
}
.sp-diag-score b { font-size: 24px; font-family: var(--vo-font-heading); line-height: 1; }
.sp-diag-score span { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.sp-gap { border-left: 3px solid var(--vo-gray); padding: 6px 12px; margin: 8px 0; background: #fff; border-radius: 4px; }
.sp-gap.high { border-left-color: var(--vo-red); }
.sp-gap.medium { border-left-color: var(--vo-yellow); }
.sp-gap.low { border-left-color: var(--vo-green); }
.sp-gap b { display: block; font-size: 13px; }
.sp-gap p { margin: 2px 0 0; font-size: 13px; color: var(--vo-ink-soft); }

/* ── Document upload ────────────────────────────────────────────── */
.sp-drop {
  display: block; border: 2px dashed var(--vo-border); border-radius: 10px;
  padding: 18px; text-align: center; color: var(--vo-ink-soft); cursor: pointer;
  background: #fff; margin: 8px 0; transition: all .15s ease; font-size: 14px;
}
.sp-drop:hover, .sp-drop.over { border-color: var(--vo-green); color: var(--vo-green-dark); background: var(--vo-green-tint); }
.sp-doc-list { margin-top: 10px; }
.sp-doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--vo-border); border-radius: 8px; margin: 6px 0; background: #fff;
}
.sp-doc-row b { font-size: 13px; display: block; }
.sp-doc-meta { font-size: 12px; color: var(--vo-ink-soft); }
.sp-doc-del {
  border: 0; background: transparent; color: var(--vo-ink-soft); cursor: pointer;
  font-size: 15px; padding: 4px 8px; border-radius: 6px;
}
.sp-doc-del:hover { background: #f6dcda; color: var(--vo-red); }

/* ── Value-proposition portfolio ────────────────────────────────── */
.sp-vp-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.sp-vp-table th {
  text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vo-ink-soft); padding: 6px 8px; border-bottom: 2px solid var(--vo-border);
}
.sp-vp-table td { padding: 5px 8px; vertical-align: middle; }
.sp-vp-table input, .sp-vp-table select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--vo-border); border-radius: 6px; font-size: 13px;
  font-family: var(--vo-font-body); background: #fff;
}
.sp-vp-rollup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.sp-vp-badge { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 20px; color: #fff; }
.sp-vp-badge.primary { background: var(--vo-green); }
.sp-vp-badge.secondary { background: var(--vo-blue); }
.sp-vp-dist { font-size: 12px; color: var(--vo-ink-soft); }

/* ── OA Model 2x2 quadrant ──────────────────────────────────────── */
.sp-oa-quad { position: relative; padding: 22px 22px 22px 26px; margin: 6px 0 4px; }
.sp-oa-axis { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--vo-ink-soft); }
.sp-oa-axis.top { top: 2px; left: 50%; transform: translateX(-50%); }
.sp-oa-axis.bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
.sp-oa-axis.left { left: -4px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left; }
.sp-oa-axis.right { right: -8px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right; }
.sp-oa-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-oa-cell { border: 1px solid var(--vo-border); border-radius: 12px; background: #fff; padding: 14px; min-height: 150px; }
.sp-oa-cell.is-primary { border-color: var(--vo-green); box-shadow: 0 0 0 2px rgba(100,153,84,.25); }
.sp-oa-cell.is-secondary { border-color: var(--vo-blue); box-shadow: 0 0 0 2px rgba(0,129,183,.18); }
.sp-oa-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-oa-cell-top h3 { font-family: var(--vo-font-heading); font-size: 15px; margin: 0; }
.sp-oa-cell .sp-oa-tag { font-size: 12px; color: var(--vo-ink-soft); margin: 2px 0 6px; }
.sp-oa-cell .sp-oa-pair { font-size: 11px; color: var(--vo-blue-dark); margin-bottom: 8px; }
.sp-oa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sp-oa-chip { background: var(--vo-green-tint); color: var(--vo-ink); border-radius: 16px; padding: 3px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.sp-oa-chip button { border: 0; background: transparent; color: var(--vo-ink-soft); cursor: pointer; font-size: 12px; padding: 0; }
.sp-oa-chip button:hover { color: var(--vo-red); }
.sp-oa-assign { width: 100%; padding: 5px 8px; border: 1px dashed var(--vo-border); border-radius: 6px; font-size: 12px; background: #fff; }

/* ── Section widgets (grids of cells) ───────────────────────────── */
.sp-w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.sp-w-cell { border: 1px solid var(--vo-border); border-top: 4px solid var(--vo-gray); border-radius: 10px; background: #fff; padding: 12px; }
.sp-w-cell.ok { border-top-color: var(--vo-green); }
.sp-w-cell.warn { border-top-color: var(--vo-red); }
.sp-w-cell.blue { border-top-color: var(--vo-blue); }
.sp-w-cell.green { border-top-color: var(--vo-green); }
.sp-w-label { font-family: var(--vo-font-heading); font-size: 13px; font-weight: 700; }
.sp-w-hint { font-size: 11px; color: var(--vo-ink-soft); margin-bottom: 6px; }
.sp-w-input { width: 100%; min-height: 84px; padding: 8px; border: 1px solid var(--vo-border); border-radius: 6px;
  font-family: var(--vo-font-body); font-size: 13px; resize: vertical; box-sizing: border-box; }
.sp-w-ctl { width: 100%; padding: 8px 10px; border: 1px solid var(--vo-border); border-radius: 6px;
  font-size: 13px; font-family: var(--vo-font-body); background: #fff; box-sizing: border-box; }

/* Audience export rows */
.sp-exp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--vo-border); }
.sp-exp-meta { flex: 1; min-width: 240px; }
.sp-exp-name { font-family: var(--vo-font-heading); font-weight: 700; font-size: 14px; }
.sp-exp-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Demo login overlay ─────────────────────────────────────────── */
.sp-login { position: fixed; inset: 0; z-index: 1000; background: linear-gradient(135deg, #0081B7, #0b3d5c); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sp-login-box { background: #fff; border-radius: 16px; max-width: 660px; width: 100%; padding: 28px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 92vh; overflow-y: auto; }
.sp-login-brand { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--vo-green-dark); font-weight: 800; }
.sp-login-title { font-family: var(--vo-font-heading); margin: 4px 0; font-size: 28px; }
.sp-login-sub { color: var(--vo-ink-soft); margin: 0 0 16px; }
.sp-login-field { margin-bottom: 16px; }
.sp-login-field label { display: block; font-size: 12px; font-weight: 700; color: var(--vo-ink-soft); margin-bottom: 4px; }
.sp-login-rolehead { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--vo-ink-soft); margin-bottom: 8px; }
.sp-login-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-login-role { text-align: left; border: 1px solid var(--vo-border); border-radius: 10px; padding: 12px 14px; background: #fff; cursor: pointer; transition: all .12s ease; font-family: var(--vo-font-body); }
.sp-login-role:hover { border-color: var(--vo-green); box-shadow: 0 4px 14px rgba(100,153,84,.2); transform: translateY(-1px); }
.sp-login-role-name { font-family: var(--vo-font-heading); font-weight: 700; font-size: 15px; color: var(--vo-green-dark); }
.sp-login-role-desc { font-size: 12px; color: var(--vo-ink-soft); margin-top: 3px; line-height: 1.4; }
.sp-login-note { font-size: 11px; color: var(--vo-ink-soft); margin-top: 16px; font-style: italic; }
.sp-login-demo { display: block; width: 100%; text-align: left; margin-top: 14px; padding: 12px 16px; border: 1px dashed var(--vo-green); border-radius: 10px; background: var(--vo-green-tint); cursor: pointer; transition: all .12s ease; font-family: var(--vo-font-body); }
.sp-login-demo:hover { background: #fff; border-style: solid; box-shadow: 0 4px 14px rgba(100,153,84,.2); transform: translateY(-1px); }
.sp-login-demo-title { display: block; font-family: var(--vo-font-heading); font-weight: 700; font-size: 14px; color: var(--vo-green-dark); }
.sp-login-demo-sub { display: block; font-size: 12px; color: var(--vo-ink-soft); margin-top: 3px; }
@media (max-width: 560px) { .sp-login-roles { grid-template-columns: 1fr; } }
#spRolePanel { display: none; }
.sp-admin-only { display: none; }
.sp-rolebadge { border: 1px solid var(--vo-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--vo-green-tint); }
.sp-rolebadge-role { font-weight: 700; font-size: 13px; }
.sp-rolebadge-co { font-size: 11px; color: var(--vo-ink-soft); margin: 2px 0 6px; }
.sp-rolebadge-flip { display: block; width: 100%; text-align: center; border: 1px solid var(--vo-green); border-radius: 6px; background: #fff; color: var(--vo-green-dark); cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px 8px; margin-bottom: 6px; font-family: var(--vo-font-body); }
.sp-rolebadge-flip:hover { background: var(--vo-green); color: #fff; }
.sp-rolebadge-switch { border: 0; background: transparent; color: var(--vo-blue-dark); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0; }

/* Snapshot & re-draft checkboxes */
.sp-redraft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; margin: 8px 0 10px; }
.sp-redraft-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.sp-w-notes { margin: 12px 0; }
.sp-w-notes summary { cursor: pointer; font-size: 13px; color: var(--vo-ink-soft); font-weight: 700; }
.sp-w-notes .sp-w-input { min-height: 60px; margin-top: 6px; }
/* Business Model Canvas: 3-col with two full-width rows at the bottom */
.sp-bmc { grid-template-columns: repeat(3, 1fr); }

/* ── Read-only viewer modal (documents, versions, appendix files) ── */
.sp-viewer-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(20, 28, 24, 0.55); display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.sp-viewer { background: #fff; border-radius: 12px; width: 100%; max-width: 860px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.32); overflow: hidden; }
.sp-viewer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--vo-border); }
.sp-viewer-titles { flex: 1; min-width: 0; }
.sp-viewer-title { font-family: var(--vo-font-heading); font-size: 20px; color: var(--vo-ink); word-break: break-word; }
.sp-viewer-sub { font-size: 12px; color: var(--vo-ink-soft); margin-top: 3px; }
.sp-viewer-close { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--vo-ink-soft); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sp-viewer-close:hover { background: var(--vo-green-tint); color: var(--vo-ink); }
.sp-viewer-body { padding: 18px 22px; overflow-y: auto; }
.sp-viewer-text { white-space: pre-wrap; word-break: break-word; font-family: var(--vo-font-body); font-size: 13.5px; line-height: 1.6; color: var(--vo-ink); background: #f8faf8; border: 1px solid var(--vo-border); border-radius: 8px; padding: 14px 16px; }
.sp-viewer-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 12px; color: var(--vo-ink-soft); }
.sp-viewer-meta b { color: var(--vo-ink); font-weight: 700; }
.sp-viewer-empty { color: var(--vo-ink-soft); font-size: 13px; font-style: italic; }
.sp-viewer-secrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--vo-border); border-radius: 7px; margin-bottom: 6px; font-size: 13px; }
.sp-viewer-secrow .nm { font-weight: 600; color: var(--vo-ink); }
.sp-viewer-secrow .st { font-size: 11px; color: var(--vo-ink-soft); white-space: nowrap; }
/* clickable document / version names */
.sp-doc-open { background: none; border: 0; padding: 0; color: var(--vo-blue-dark); cursor: pointer; font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.sp-doc-open:hover { color: var(--vo-green-dark); }

/* ── Organizational Alignment Resources ── */
.sp-oares-context { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sp-oares-chip { font-size: 12px; color: var(--vo-ink-soft); background: var(--vo-green-tint); border: 1px solid var(--vo-border); border-radius: 999px; padding: 4px 12px; }
.sp-oares-chip b { color: var(--vo-ink); font-weight: 700; }
.sp-oares-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 4px; }
.sp-oares-field { display: flex; flex-direction: column; gap: 4px; }
.sp-oares-field label { font-size: 12px; font-weight: 700; color: var(--vo-ink-soft); }
.sp-oares-result { border-top: 4px solid var(--vo-green); }
.sp-oares-rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-oares-rtitle { font-family: var(--vo-font-heading); font-size: 24px; color: var(--vo-ink); margin: 0; }
.sp-oares-rtags { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-oares-tag { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.sp-oares-tag.vp { background: var(--vo-blue-dark); color: #fff; }
.sp-oares-tag.mat { background: var(--vo-green-tint); color: var(--vo-green-dark); border: 1px solid var(--vo-green); }
.sp-oares-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 16px; }
.sp-oares-leadcard { border-radius: 10px; padding: 14px 16px; }
.sp-oares-leadcard.culture { background: #fef6ec; border: 1px solid #f0d9b8; }
.sp-oares-leadcard.gov { background: #eef4fb; border: 1px solid #c9dcf0; }
.sp-oares-leadlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vo-ink-soft); margin-bottom: 6px; }
.sp-oares-leadtext { font-size: 14px; line-height: 1.55; color: var(--vo-ink); }
.sp-oares-blabel { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vo-green-dark); margin: 14px 0 6px; }
.sp-oares-btext { font-size: 14px; line-height: 1.6; color: var(--vo-ink); margin: 0; }
.sp-oares-list { margin: 0; padding-left: 20px; }
.sp-oares-list li { font-size: 14px; line-height: 1.6; color: var(--vo-ink); margin-bottom: 4px; }
@media (max-width: 640px) { .sp-oares-lead { grid-template-columns: 1fr; } }

/* ── AI Strategic Coach ── */
.sp-coach { border: 1px solid var(--vo-border); border-radius: 12px; background: #fff; overflow: hidden; margin-bottom: 12px; }
.sp-coach-thread { min-height: 300px; max-height: 56vh; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: #f8faf8; }
.sp-coach-empty { text-align: center; margin: auto; padding: 24px 12px; max-width: 560px; }
.sp-coach-empty-title { font-family: var(--vo-font-heading); font-size: 18px; color: var(--vo-ink); margin-bottom: 4px; }
.sp-coach-starters { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sp-coach-starter { text-align: left; border: 1px solid var(--vo-border); background: #fff; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; color: var(--vo-ink); cursor: pointer; font-family: var(--vo-font-body); transition: border-color .12s, background .12s; }
.sp-coach-starter:hover { border-color: var(--vo-green); background: var(--vo-green-tint); }
.sp-coach-msg { display: flex; }
.sp-coach-msg.user { justify-content: flex-end; }
.sp-coach-msg.coach { justify-content: flex-start; }
.sp-coach-bubble { max-width: 82%; border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.6; }
.sp-coach-msg.user .sp-coach-bubble { background: var(--vo-blue-dark); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.sp-coach-msg.coach .sp-coach-bubble { background: #fff; color: var(--vo-ink); border: 1px solid var(--vo-border); border-bottom-left-radius: 4px; }
.sp-coach-bubble.pending { color: var(--vo-ink-soft); font-style: italic; }
.sp-coach-dots { display: inline-block; animation: sppulse 1.2s ease-in-out infinite; }
@keyframes sppulse { 0%,100%{opacity:.45} 50%{opacity:1} }
.sp-coach-h { font-family: var(--vo-font-heading); color: var(--vo-ink); margin: 10px 0 4px; line-height: 1.3; }
h3.sp-coach-h { font-size: 16px; } h4.sp-coach-h { font-size: 15px; } h5.sp-coach-h { font-size: 14px; }
.sp-coach-p { margin: 6px 0; }
.sp-coach-p:first-child { margin-top: 0; }
.sp-coach-ul { margin: 6px 0; padding-left: 20px; }
.sp-coach-ul li { margin-bottom: 3px; }
.sp-coach-composer { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.sp-coach-input { flex: 1; resize: none; border: 1px solid var(--vo-border); border-radius: 10px; padding: 12px 14px; font-size: 14px; font-family: var(--vo-font-body); line-height: 1.5; color: var(--vo-ink); max-height: 160px; }
.sp-coach-input:focus { outline: none; border-color: var(--vo-green); box-shadow: 0 0 0 3px var(--vo-green-tint); }
.sp-coach-composer-btns { display: flex; flex-direction: column; gap: 6px; }

/* OA resource — VisionOne-native detail blocks */
.sp-oares-goal { display: flex; align-items: baseline; gap: 10px; background: var(--vo-green); color: #fff; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.sp-oares-goal-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; opacity: 0.85; }
.sp-oares-goal-text { font-size: 14.5px; line-height: 1.5; font-weight: 600; }
.sp-oares-subline { font-size: 13px; line-height: 1.5; color: var(--vo-ink); margin: 6px 0 0; }
.sp-oares-subline b { color: var(--vo-ink); }
.sp-oares-chiprow { margin-top: 8px; }
.sp-oares-chiplabel { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vo-ink-soft); margin-bottom: 4px; }
.sp-oares-minichip { display: inline-block; font-size: 12px; background: #fff; border: 1px solid var(--vo-border); border-radius: 6px; padding: 3px 9px; margin: 0 4px 4px 0; color: var(--vo-ink); }

/* ── Strategy Alignment Check ── */
.sp-align-head { display: flex; gap: 18px; align-items: center; }
.sp-align-gauge { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.sp-align-gauge.good { background: var(--vo-green); }
.sp-align-gauge.warn { background: #d99a2b; }
.sp-align-gauge.bad { background: var(--vo-red, #c0392b); }
.sp-align-score { font-family: var(--vo-font-heading); font-size: 30px; line-height: 1; }
.sp-align-score-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; margin-top: 2px; }
.sp-align-htext { flex: 1; min-width: 0; }
.sp-align-verdict { font-family: var(--vo-font-heading); font-size: 19px; margin-bottom: 4px; }
.sp-align-verdict.good { color: var(--vo-green-dark); }
.sp-align-verdict.bad { color: var(--vo-red, #c0392b); }
.sp-align-summary { font-size: 14px; line-height: 1.55; color: var(--vo-ink); }
.sp-align-noflags { font-size: 14px; color: var(--vo-green-dark); font-weight: 600; }
.sp-align-flagcount { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vo-ink-soft); margin: 4px 2px 8px; }
.sp-flag { margin-bottom: 10px; border-left: 4px solid var(--vo-border); }
.sp-flag-high { border-left-color: var(--vo-red, #c0392b); }
.sp-flag-medium { border-left-color: #d99a2b; }
.sp-flag-low { border-left-color: var(--vo-blue-dark); }
.sp-flag-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.sp-flag-sev { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 5px; padding: 2px 8px; color: #fff; }
.sp-flag-sev-high { background: var(--vo-red, #c0392b); }
.sp-flag-sev-medium { background: #d99a2b; }
.sp-flag-sev-low { background: var(--vo-blue-dark); }
.sp-flag-area { font-size: 11px; color: var(--vo-ink-soft); font-weight: 700; }
.sp-flag-item { font-size: 14.5px; font-weight: 700; color: var(--vo-ink); margin-bottom: 6px; }
.sp-flag-line { font-size: 13.5px; line-height: 1.55; color: var(--vo-ink); margin-top: 3px; }
.sp-flag-line.fix { color: var(--vo-green-dark); }
.sp-flag-line b { color: var(--vo-ink); }

/* ── Revenue / Financial Bridge (waterfall) ── */
.sp-bridge-ends { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 12px; align-items: end; margin: 8px 0 14px; }
.sp-bridge-endblock { display: flex; flex-direction: column; gap: 4px; }
.sp-bridge-endblock label { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vo-ink-soft); }
.sp-bridge-endblock.base label { color: var(--vo-blue-dark); }
.sp-bridge-endblock.target label { color: var(--vo-green-dark); }
.sp-bridge-num { max-width: 100%; }
.sp-bridge-unitnote { font-size: 10px; color: var(--vo-ink-soft); }
.sp-bridge-chart { border: 1px solid var(--vo-border); border-radius: 10px; background: #fff; padding: 10px; margin-bottom: 14px; overflow-x: auto; }
.sp-bridge-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.sp-bridge-axis { stroke: #c9cfca; stroke-width: 1; }
.sp-bridge-conn { stroke: #b6bdb7; stroke-width: 1.2; stroke-dasharray: 3 3; }
.sp-bridge-bar.total { fill: #4a5568; }
.sp-bridge-bar.up { fill: var(--vo-green); }
.sp-bridge-bar.down { fill: var(--vo-red, #c0392b); }
.sp-bridge-vlabel { font-family: var(--vo-font-body); font-size: 12px; font-weight: 700; text-anchor: middle; }
.sp-bridge-vlabel.total { fill: #4a5568; }
.sp-bridge-vlabel.up { fill: var(--vo-green-dark); }
.sp-bridge-vlabel.down { fill: var(--vo-red, #c0392b); }
.sp-bridge-clabel { font-family: var(--vo-font-body); font-size: 10.5px; fill: var(--vo-ink-soft); text-anchor: middle; }
.sp-bridge-clabel.total { fill: var(--vo-ink); font-weight: 700; }
.sp-bridge-recon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--vo-ink-soft); padding: 0 2px; }
.sp-bridge-check.ok { color: var(--vo-green-dark); font-weight: 700; }
.sp-bridge-check.warn { color: #b7791f; font-weight: 700; }
.sp-bridge-steps { margin-top: 4px; }
.sp-bridge-steprow { display: grid; grid-template-columns: 1.6fr 0.7fr 1.2fr 1.4fr 28px; gap: 8px; align-items: center; margin-bottom: 6px; }
.sp-bridge-steprow.head { margin-bottom: 4px; }
.sp-bridge-h { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vo-ink-soft); }
@media (max-width: 720px) { .sp-bridge-ends { grid-template-columns: 1fr; } .sp-bridge-steprow { grid-template-columns: 1fr 0.6fr 1fr; } }

/* ── OA Alignment Matrix library ── */
.sp-oamx-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; }
.sp-oamx-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--vo-border); }
.sp-oamx-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--vo-border); background: #fff; border-radius: 8px 8px 0 0; padding: 8px 12px; cursor: pointer; font-family: var(--vo-font-body); }
.sp-oamx-tab.active { border-color: var(--vo-green); border-bottom-color: #fff; background: var(--vo-green-tint); }
.sp-oamx-tabname { font-size: 12.5px; font-weight: 700; color: var(--vo-ink); white-space: nowrap; }
.sp-oamx-tabcov { font-size: 10px; color: var(--vo-ink-soft); }
.sp-oamx-tabcov.full { color: var(--vo-green-dark); font-weight: 700; }
.sp-oamx-tabcov.partial { color: #b7791f; }
.sp-oamx-areatitle { font-family: var(--vo-font-heading); font-size: 22px; color: var(--vo-ink); margin: 4px 0 4px; }
.sp-oamx-areaintro { font-size: 13.5px; color: var(--vo-ink-soft); margin: 0 0 12px; }
.sp-oamx-arearow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sp-oamx-focus { padding: 14px 16px; margin-bottom: 14px; }
.sp-oamx-focushead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-oamx-focustitle { font-family: var(--vo-font-heading); font-size: 16px; color: var(--vo-green-dark); margin: 0; }
.sp-oamx-cellgen { border: 1px solid var(--vo-green); background: #fff; color: var(--vo-green-dark); border-radius: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; cursor: pointer; font-family: var(--vo-font-body); }
.sp-oamx-cellgen:hover { background: var(--vo-green); color: #fff; }
.sp-oamx-empty { font-size: 12.5px; color: var(--vo-ink-soft); font-style: italic; padding: 8px 0; }
.sp-oamx-grid { display: grid; grid-template-columns: 116px repeat(5, 1fr); gap: 4px; overflow-x: auto; }
.sp-oamx-cell { border-radius: 6px; padding: 7px 8px; font-size: 11px; min-width: 0; }
.sp-oamx-cell.corner { background: transparent; display: flex; align-items: flex-end; }
.sp-oamx-cornerlabel { font-size: 9.5px; color: var(--vo-ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sp-oamx-cell.colhead { background: var(--vo-green-tint); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sp-oamx-cell.colhead.curcol { background: var(--vo-green); }
.sp-oamx-cell.colhead.curcol .sp-oamx-mnum, .sp-oamx-cell.colhead.curcol .sp-oamx-mlabel { color: #fff; }
.sp-oamx-mnum { font-size: 14px; font-weight: 800; color: var(--vo-green-dark); font-family: var(--vo-font-heading); }
.sp-oamx-mlabel { font-size: 9px; color: var(--vo-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.sp-oamx-cell.rowhead { background: #f4f6f4; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.sp-oamx-cell.rowhead.primary { background: var(--vo-blue-dark); }
.sp-oamx-cell.rowhead.primary .sp-oamx-vpname { color: #fff; }
.sp-oamx-cell.rowhead.secondary { background: var(--vo-blue-lt, #e4f1f8); }
.sp-oamx-vpname { font-size: 11.5px; font-weight: 700; color: var(--vo-ink); }
.sp-oamx-vptag { font-size: 8px; font-weight: 800; letter-spacing: 0.06em; color: #cfe6f5; }
.sp-oamx-vptag.sec { color: var(--vo-blue-dark); }
.sp-oamx-cell.data { background: #fff; border: 1px solid var(--vo-border); color: var(--vo-ink); }
.sp-oamx-cell.data.filled { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.sp-oamx-cell.data.filled:hover { border-color: var(--vo-green); box-shadow: 0 2px 8px rgba(100,153,84,0.18); }
.sp-oamx-cell.data.primrow { background: #fbfdfa; }
.sp-oamx-cell.data.curcol { border-color: #cfe0c6; }
.sp-oamx-cell.data.focuscell { border: 2px solid var(--vo-green); background: var(--vo-green-tint); }
.sp-oamx-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.sp-oamx-desc.muted { color: var(--vo-border); text-align: center; }
.sp-oamx-detail .sp-oamx-detaildesc { font-size: 14.5px; line-height: 1.6; color: var(--vo-ink); margin: 0 0 6px; }
@media (max-width: 760px) { .sp-oamx-grid { grid-template-columns: 90px repeat(5, minmax(96px, 1fr)); } }

/* ── UX fixes (2026-07) ─────────────────────────────────────────── */
/* Matrix cell-edit textareas: fill the modal width, grow, and scroll. */
.sp-oamx-edit { width: 100%; box-sizing: border-box; border: 1px solid var(--vo-border); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: var(--vo-font-body); line-height: 1.5; color: var(--vo-ink); resize: vertical; overflow: auto; min-height: 88px; margin-bottom: 4px; background: #fff; }
.sp-oamx-edit:focus { outline: none; border-color: var(--vo-green); box-shadow: 0 0 0 3px var(--vo-green-tint); }
.sp-oamx-detail { width: 100%; }

/* Functional-area tabs: never wrap; always show a horizontal scrollbar; leave
   room on the right so the last tab clears the floating action buttons. */
.sp-oamx-tabs { flex-wrap: nowrap; padding-right: 72px; scrollbar-width: thin; scrollbar-color: var(--vo-green) transparent; scroll-snap-type: x proximity; }
.sp-oamx-tabs > .sp-oamx-tab { scroll-snap-align: start; }
.sp-oamx-tabs::-webkit-scrollbar { height: 10px; }
.sp-oamx-tabs::-webkit-scrollbar-thumb { background: var(--vo-green); border-radius: 5px; }
.sp-oamx-tabs::-webkit-scrollbar-track { background: var(--vo-green-tint); border-radius: 5px; }

/* Coach reply: fill the response area and give long answers their own scrollbar. */
.sp-coach-msg.coach .sp-coach-bubble { max-width: 100%; max-height: 52vh; overflow-y: auto; }

/* Visible scrollbars on every editable text field that overflows (app-wide). */
#spView textarea, .sp-viewer textarea { scrollbar-width: thin; scrollbar-color: var(--vo-green) var(--vo-green-tint); overflow-y: auto; }
#spView textarea::-webkit-scrollbar, .sp-viewer textarea::-webkit-scrollbar { width: 10px; }
#spView textarea::-webkit-scrollbar-thumb, .sp-viewer textarea::-webkit-scrollbar-thumb { background: var(--vo-green); border-radius: 5px; }
#spView textarea::-webkit-scrollbar-track, .sp-viewer textarea::-webkit-scrollbar-track { background: var(--vo-green-tint); border-radius: 5px; }
/* Base builder fields: bounded box so long text scrolls instead of clipping. */
.sp-field textarea { min-height: 96px; max-height: 240px; overflow-y: auto; box-sizing: border-box; resize: vertical; }
.sp-w-input { max-height: 240px; overflow-y: auto; }

/* Hide the shared platform floating action buttons in the Strategic Playbook (per request).
   App-scoped: this stylesheet only loads here, so other RunMai apps keep their FABs. */
.wt-ask-ai-fab, .wt-improve-fab, .wt-notes-fab, .wt-bookmark-fab,
.wt-bookmark-add-fab, .wt-edit-fab-panel, .wt-coach-fab { display: none !important; }

/* ── Resources view ── */
.sp-res-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 6px; }
.sp-res-app { border: 1px solid var(--vo-border); border-radius: 10px; padding: 12px 14px; background: #fbfdfb; }
.sp-res-app-name { display: block; font-weight: 700; color: var(--vo-blue-dark); text-decoration: none; margin-bottom: 4px; }
.sp-res-app-name:hover { text-decoration: underline; }
.sp-res-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.sp-res-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vo-ink); }
.sp-res-name { color: var(--vo-ink); }
a.sp-res-name { color: var(--vo-blue-dark); text-decoration: none; font-weight: 600; }
a.sp-res-name:hover { text-decoration: underline; }
.sp-res-kind { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.sp-res-kind.toolkit { background: var(--vo-green-tint); color: var(--vo-green-dark); }
.sp-res-kind.template { background: #eef4fb; color: var(--vo-blue-dark); }
.sp-res-kind.framework { background: #f3eefb; color: #6b4fa0; }
.sp-res-kind.playbook { background: #fef4e8; color: #b7791f; }
.sp-res-drlink { margin-top: 8px; border: 0; background: transparent; color: var(--vo-blue-dark); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline; padding: 0; }
.sp-res-ma { border-top: 4px solid #b7791f; }

/* ── Contingency scenario runner ── */
.sp-scn-card { padding: 14px 16px; }
.sp-scn-run { margin: 8px 0 14px; }
.sp-scn-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sp-scn-saved { display: flex; flex-direction: column; gap: 12px; }
.sp-scn-saveditem { position: relative; }
.sp-scn-result { border: 1px solid var(--vo-border); border-radius: 10px; padding: 14px 16px; background: #fbfdfb; }
.sp-scn-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.sp-scn-kind { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; background: var(--vo-green-tint); color: var(--vo-green-dark); }
.sp-scn-kind.worst-case { background: #fdeceb; color: var(--vo-red, #c73127); }
.sp-scn-kind.best-case { background: #eaf5e6; color: var(--vo-green-dark); }
.sp-scn-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 5px; }
.sp-scn-sev.bad { background: #fdeceb; color: #c73127; } .sp-scn-sev.warn { background: #fef4e8; color: #b7791f; } .sp-scn-sev.good { background: #eaf5e6; color: var(--vo-green-dark); }
.sp-scn-scenario { font-style: italic; color: var(--vo-ink-soft); font-size: 13px; margin-bottom: 6px; }
.sp-scn-headline { font-family: var(--vo-font-heading); font-size: 16px; color: var(--vo-ink); margin-bottom: 8px; }
.sp-scn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-scn-chip { font-size: 11px; background: #eef4fb; color: var(--vo-blue-dark); border-radius: 999px; padding: 3px 10px; }
.sp-scn-recs { margin: 4px 0 0; padding-left: 18px; }
.sp-scn-recs li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; }
.sp-scn-pri { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; background: var(--vo-green-tint); color: var(--vo-green-dark); }
.sp-scn-pri.now { background: #fdeceb; color: #c73127; } .sp-scn-pri.near-term { background: #fef4e8; color: #b7791f; } .sp-scn-pri.monitor { background: #eef4fb; color: var(--vo-blue-dark); }
.sp-scn-rec-action { font-weight: 600; color: var(--vo-ink); }
.sp-scn-rec-why { font-size: 12.5px; color: var(--vo-ink-soft); margin-top: 2px; }
.sp-scn-net { margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--vo-green); background: var(--vo-green-tint); font-size: 13.5px; color: var(--vo-ink); border-radius: 0 6px 6px 0; }

/* ── Settings ── */
.sp-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 8px 0 12px; }
.sp-set-field { display: flex; flex-direction: column; gap: 4px; }
.sp-set-field > label { font-size: 12px; font-weight: 700; color: var(--vo-ink-soft); }
.sp-set-color { width: 60px; height: 36px; border: 1px solid var(--vo-border); border-radius: 6px; padding: 2px; cursor: pointer; background: #fff; }
.sp-set-logo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.sp-set-logo-prev { width: 160px; height: 72px; border: 1px dashed var(--vo-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fbfdfb; overflow: hidden; }
.sp-set-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-set-choices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.sp-set-choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--vo-border); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.sp-set-choice.active { border-color: var(--vo-green); background: var(--vo-green-tint); }
.sp-set-choice input { margin-top: 3px; }
.sp-set-choice-title { font-weight: 700; color: var(--vo-ink); font-size: 14px; }

/* ── Dashboard quick actions + alignment banner ── */
.sp-dash-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 20px; }
.sp-dash-tile { text-align: left; border: 1px solid var(--vo-border); border-radius: 10px; padding: 12px 14px; background: #fff; cursor: pointer; font-family: var(--vo-font-body); transition: border-color .12s, box-shadow .12s; }
.sp-dash-tile:hover { border-color: var(--vo-green); box-shadow: 0 2px 10px rgba(100,153,84,0.15); }
.sp-dash-tile-title { font-weight: 700; color: var(--vo-blue-dark); font-size: 14px; }
.sp-dash-tile-desc { font-size: 12px; color: var(--vo-ink-soft); margin-top: 2px; }
.sp-dash-align { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; border-left: 5px solid var(--vo-green); }
.sp-dash-align.warn { border-left-color: #b7791f; } .sp-dash-align.bad { border-left-color: #c73127; }
.sp-dash-align-score { font-family: var(--vo-font-heading); font-size: 40px; font-weight: 800; color: var(--vo-green-dark); line-height: 1; }
.sp-dash-align.warn .sp-dash-align-score { color: #b7791f; } .sp-dash-align.bad .sp-dash-align-score { color: #c73127; }
.sp-dash-align-text { flex: 1; } .sp-dash-align-title { font-weight: 700; color: var(--vo-ink); }
.sp-oamx-deepdive { margin-top: 8px; } .sp-oamx-ddsub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vo-ink-soft); margin: 8px 0 2px; }

/* ── Strategy Map (Balanced Scorecard / EOS) ── */
.sp-model-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.sp-model-lbl { font-size: 12px; font-weight: 700; color: var(--vo-ink-soft); }
.sp-model-btn { border: 1px solid var(--vo-border); background: #fff; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--vo-font-body); color: var(--vo-ink-soft); }
.sp-model-btn.active { background: var(--vo-green); color: #fff; border-color: var(--vo-green); }
.sp-bsc-cell { border: 1px solid var(--vo-border); border-left: 5px solid var(--vo-green); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.sp-bsc-cell.fin { border-left-color: #649954; } .sp-bsc-cell.cust { border-left-color: #0081B7; }
.sp-bsc-cell.proc { border-left-color: #74519A; } .sp-bsc-cell.learn { border-left-color: #EBB100; }
.sp-bsc-head { margin-bottom: 8px; }
.sp-bsc-label { font-family: var(--vo-font-heading); font-size: 17px; color: var(--vo-ink); }
.sp-bsc-q { font-size: 12px; color: var(--vo-ink-soft); font-style: italic; }
.sp-bsc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sp-bsc-sub { display: flex; flex-direction: column; gap: 3px; }
.sp-bsc-sublabel { font-size: 12px; font-weight: 700; color: var(--vo-green-dark); }
.sp-bsc-input { width: 100%; min-height: 62px; max-height: 200px; overflow-y: auto; box-sizing: border-box; border: 1px solid var(--vo-border); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: var(--vo-font-body); resize: vertical; }
.sp-eos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sp-eos-box { border: 1px solid var(--vo-border); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.sp-tm-note { font-size: 10.5px; color: var(--vo-muted, #94A3B8); margin-top: 12px; font-style: italic; line-height: 1.4; }
.sp-cascade summary { font-weight: 700; color: var(--vo-green-dark); }
.sp-cascade-tbl { margin-top: 8px; } .sp-cascade-tbl td, .sp-cascade-tbl th { font-size: 12.5px; }

/* ── Products/Services portfolio check ── */
.sp-pf { margin-top: 10px; }
.sp-pf-box { border: 1px solid var(--vo-border); border-left: 4px solid var(--vo-green); border-radius: 8px; padding: 10px 14px; background: #fbfdfb; }
.sp-pf-box.warn { border-left-color: #b7791f; background: #fff9f0; }
.sp-pf-title { font-weight: 700; color: var(--vo-ink); font-size: 13px; margin-bottom: 4px; }
.sp-pf-line { font-size: 13px; color: var(--vo-ink); margin-top: 3px; }
.sp-pf-line.warn { color: #b7791f; } .sp-pf-line.ok { color: var(--vo-green-dark); }

/* ── Per-area maturity (Alignment Matrix) ── */
.sp-oamx-matrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.sp-oamx-matlbl { font-size: 13px; font-weight: 700; color: var(--vo-ink); }
.sp-matref summary { font-weight: 700; color: var(--vo-green-dark); }
.sp-matref-row { border-top: 1px solid var(--vo-border); padding: 10px 0; }
.sp-matref-head { display: flex; align-items: center; gap: 8px; }
.sp-matref-n { width: 24px; height: 24px; border-radius: 50%; background: var(--vo-green); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--vo-font-heading); }
.sp-matref-name { font-weight: 700; color: var(--vo-ink); }
.sp-matref-ppo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; }
.sp-matref-ppo-cell { background: #f8faf8; border: 1px solid var(--vo-border); border-radius: 6px; padding: 8px 10px; }
.sp-matref-ppo-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vo-green-dark); }
.sp-matref-ppo-txt { font-size: 12px; color: var(--vo-ink); margin-top: 2px; line-height: 1.45; }

/* ── Alignment Matrix tabs: WRAP so all areas fit on screen (no clipping) ── */
.sp-oamx-tabs { flex-wrap: wrap !important; overflow-x: visible !important; padding-right: 0 !important; gap: 6px; border-bottom: 1px solid var(--vo-border); padding-bottom: 8px; }
.sp-oamx-tab { border-radius: 8px !important; border: 1px solid var(--vo-border) !important; margin-bottom: 2px; }
.sp-oamx-tab.active { border-color: var(--vo-green) !important; background: var(--vo-green-tint) !important; }

/* ── Export: brand/template status ── */
.sp-exp-brandstatus { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 8px; }
.sp-exp-btag { font-size: 12px; color: var(--vo-ink-soft); background: var(--vo-green-tint); border-radius: 999px; padding: 3px 12px; }
.sp-exp-btag b { color: var(--vo-ink); }

/* ── Resource attach/download control ── */
.sp-res-attach { border: 1px solid var(--vo-green); background: #fff; color: var(--vo-green-dark); border-radius: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; cursor: pointer; font-family: var(--vo-font-body); margin-left: auto; }
.sp-res-attach:hover { background: var(--vo-green); color: #fff; }
.sp-res-item { gap: 8px; }

/* Sidebar keeps its own scroll (the section list is long) and a little foot room. */
html body .sp-sidebar { padding-bottom: 24px !important; }