/* M&A Playbook — the M&A-specific layer.
 *
 * The app loads Strategic-Playbook.css and Strategic-Playbook-enhance.css first and
 * inherits the whole design grammar from them (sp-* classes, brand variables, the
 * section/widget/table/matrix styling). This sheet adds ONLY what is specific to M&A,
 * under an ma- prefix, so there is no chance of a redefinition drifting the two apps
 * apart. Anything that should look the same in both belongs in the shared sheets.
 *
 * All colours come from the VisionOne brand variables — no new palette.
 */

/* ── Export progress ───────────────────────────────────────────────
   An elapsed-time bar with the stage named in words. It eases to 90% and holds, because
   the server streams nothing back until it is done — there is no real percentage, and a
   bar that claims one would be lying. */
.ma-prog-host:empty { display: none; }
.ma-prog {
  margin: 10px 0 4px;
  padding: 11px 14px;
  background: var(--vo-canvas, #f4f7f3);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-left: 4px solid var(--vo-blue, #0081B7);
  border-radius: 8px;
}
.ma-prog.ok { border-left-color: var(--vo-green, #649954); }
.ma-prog.bad { border-left-color: var(--vo-red, #C73127); }
.ma-prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ma-prog-title { font-weight: 700; font-size: 13px; color: var(--vo-ink, #22303c); }
.ma-prog-pct {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 15px; color: var(--vo-blue-dark, #005f87);
}
.ma-prog.ok .ma-prog-pct { color: var(--vo-green-dark, #4a7340); }
.ma-prog-bar {
  height: 8px;
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 7px;
}
.ma-prog-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--vo-blue, #0081B7), var(--vo-green, #649954));
  transition: width .3s ease;
}
.ma-prog.ok .ma-prog-bar > span { background: var(--vo-green, #649954); }
.ma-prog.bad .ma-prog-bar > span { background: var(--vo-red, #C73127); }
.ma-prog-stage { font-size: 12.5px; font-weight: 700; color: var(--vo-ink, #22303c); }
.ma-prog-note { font-size: 11.5px; line-height: 1.45; color: var(--vo-ink-soft, #5b6b7a); margin-top: 3px; }

/* ── Deal side switcher (sidebar) ───────────────────────────────────
   Buy-side / sell-side / merger. High in the sidebar because it changes what the whole
   app is: which sections exist, what several are called, and how the AI frames advice. */
.ma-side {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--vo-blue-tint, #e0f1f8);
  border: 1px solid var(--vo-blue, #0081B7);
  border-radius: 8px;
}
.ma-side:empty { display: none; }
.ma-side-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--vo-blue-dark, #005f87); margin-bottom: 5px;
}
.ma-side-select {
  width: 100%;
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 8px;
  border: 1px solid var(--vo-blue, #0081B7);
  border-radius: 6px;
  background: #fff;
  color: var(--vo-ink, #22303c);
}
.ma-side-desc { font-size: 11px; line-height: 1.4; color: var(--vo-ink-soft, #5b6b7a); margin-top: 6px; }

/* ── OA Alignment Fit ──────────────────────────────────────────────
   Two columns, one per company, so the comparison is the layout rather than something the
   reader has to hold in their head. */
.ma-oa-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
.ma-oa-col {
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-top: 3px solid var(--vo-muted, #b9c2cc);
  border-radius: 8px;
  padding: 12px 14px;
}
.ma-oa-col.us { border-top-color: var(--vo-blue, #0081B7); }
.ma-oa-col.them { border-top-color: var(--vo-purple, #7a5ea8); }
.ma-oa-col-head {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 15px; color: var(--vo-ink, #22303c); margin-bottom: 10px;
}
.ma-oa-col .sp-w-label { margin-top: 12px; }
.ma-oa-req {
  background: var(--vo-canvas, #f4f7f3);
  border: 1px dashed var(--vo-border, #dfe4ea);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 0;
  font-size: 11.5px; line-height: 1.45; color: var(--vo-ink-soft, #5b6b7a);
}
.ma-oa-req-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vo-ink-soft, #5b6b7a); margin-bottom: 4px;
}
.ma-oa-req-row { margin-top: 3px; }
.ma-oa-verdict { margin: 0 0 14px; }
.ma-oa-clash {
  margin-top: 8px;
  padding: 8px 11px;
  background: #f6e2e0;
  border-left: 3px solid var(--vo-red, #C73127);
  border-radius: 4px;
  font-size: 12.5px; font-weight: 700; line-height: 1.45;
  color: #8f231c;
}
.ma-oa-clash-card { border-left: 4px solid var(--vo-red, #C73127); }

/* ── The OA quadrant map ───────────────────────────────────────────
   The same four-quadrant map the Strategic Playbook uses, with both companies pinned to
   their quadrant. Distance on the map IS the integration difficulty. */
.ma-quad {
  position: relative;
  margin: 6px 0 22px;
  padding: 26px 30px;
}
.ma-quad-axis {
  position: absolute;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--vo-ink-soft, #5b6b7a);
}
.ma-quad-top { top: 4px; left: 50%; transform: translateX(-50%); }
.ma-quad-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
.ma-quad-left { left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.ma-quad-right { right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.ma-quad-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--vo-border, #dfe4ea);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 8px;
  overflow: hidden;
}
.ma-quad-cell {
  background: var(--vo-surface, #fff);
  padding: 14px 16px;
  min-height: 132px;
  display: flex; flex-direction: column; gap: 3px;
}
.ma-quad-cell.is-us { background: var(--vo-blue-tint, #e0f1f8); }
.ma-quad-cell.is-them { background: #efe9f7; }
.ma-quad-cell.is-both {
  background: var(--vo-green-tint, #e6efe2);
  box-shadow: inset 0 0 0 2px var(--vo-green, #649954);
}
.ma-quad-name { font-family: var(--vo-font-heading, Sanchez, serif); font-size: 15px; color: var(--vo-ink, #22303c); }
.ma-quad-tag { font-size: 11.5px; font-style: italic; color: var(--vo-ink-soft, #5b6b7a); }
.ma-quad-meta { font-size: 11px; color: var(--vo-ink-soft, #5b6b7a); margin-top: 4px; line-height: 1.4; }
.ma-quad-pins { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 8px; }
.ma-quad-pin {
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; color: #fff;
}
.ma-quad-pin.us { background: var(--vo-blue, #0081B7); }
.ma-quad-pin.them { background: var(--vo-purple, #7a5ea8); }

/* ── The "VIEWING AS" bar: a real fixed header, not a sticky overlay ──
 *
 * The shared rule makes .sp-viewbar-wrap `position: sticky` inside .sp-main, which is the
 * scrolling pane. Sticky does keep it at the top — but "at the top" for a sticky element
 * means content slides UNDERNEATH it, which is exactly the complaint: the bar appears to
 * travel down the page and cover the text you were reading. Making it opaque only changed
 * what the covering looked like.
 *
 * Fixed properly by changing which element scrolls. .sp-main becomes a flex column that
 * does NOT scroll; the bar and the banner are fixed-height rows at the top of it; and
 * #spView is the only scrolling box. The bar is then permanently at the top of the pane
 * and content scrolls past *below* it, never under it, so nothing is ever covered.
 *
 * Scoped to this app on purpose — the Strategic Playbook has the same behaviour and is
 * live, so it is not changed here.
 */
html body .sp-main {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;      /* the pane no longer scrolls — #spView does */
  padding-bottom: 0 !important;     /* the shared rule's 110px moves onto #spView */
}
html body .sp-viewbar-wrap {
  position: static;                 /* no longer needs sticky: it cannot scroll away */
  flex: 0 0 auto;
  z-index: auto;
  background: transparent;
  margin: 0;
  padding: 0;
}
html body .sp-viewbar-wrap .sp-viewbar { margin: 0 0 12px; }
html body #spBanner { flex: 0 0 auto; }

/* The scrolling box is #spScroll, which is FULL WIDTH, so its scrollbar sits at the right
   edge of the pane where anyone would look for it. #spView keeps its 980px reading width
   as a column inside. Scrolling #spView directly (the first attempt) put the scrollbar at
   the edge of that 980px column — mid-screen on a wide display, which reads as missing. */
html body #spScroll {
  flex: 1 1 auto;
  min-height: 0;                    /* required, or a flex item refuses to shrink */
  overflow-y: scroll;               /* always reserve the track, so the layout never shifts */
  overscroll-behavior: contain;
  padding-right: 6px;
  padding-bottom: 110px;            /* the breathing room .sp-main used to provide */
  scrollbar-width: auto;
  scrollbar-color: var(--vo-green, #649954) var(--vo-green-tint, #e6efe2);
}
html body #spScroll::-webkit-scrollbar { width: 12px; }
html body #spScroll::-webkit-scrollbar-track {
  background: var(--vo-green-tint, #e6efe2);
  border-radius: 6px;
}
html body #spScroll::-webkit-scrollbar-thumb {
  background: var(--vo-green, #649954);
  border-radius: 6px;
  border: 2px solid var(--vo-green-tint, #e6efe2);
}
html body #spScroll::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark, #4a7340); }
/* #spView is now just the content column — it must not scroll or cap the pane's height. */
html body #spView { overflow: visible; }

/* ── Decision gates ────────────────────────────────────────────────
   The gate strip on the dashboard and the tabs on the Gate Check view. A gate is the
   most consequential thing on the screen, so it reads as a card and not a row. */
.ma-gate-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.ma-gate-tile {
  text-align: left;
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-left: 4px solid var(--vo-muted, #b9c2cc);
  border-radius: 8px;
  padding: 13px 15px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ma-gate-tile:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .09); transform: translateY(-1px); }
.ma-gate-tile.partial { border-left-color: var(--vo-yellow, #E5B739); }
.ma-gate-tile.clear { border-left-color: var(--vo-green, #649954); }
.ma-gate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ma-gate-name { font-weight: 700; font-size: 13.5px; color: var(--vo-ink, #22303c); }
.ma-gate-chip {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vo-blue-tint, #e0f1f8);
  color: var(--vo-blue-dark, #005f87);
  white-space: nowrap;
}
.ma-gate-tile.clear .ma-gate-chip { background: var(--vo-green-tint, #e6efe2); color: var(--vo-green-dark, #4a7340); }
.ma-gate-q { font-size: 12.5px; color: var(--vo-ink-soft, #5b6b7a); margin: 6px 0 9px; line-height: 1.45; }
.ma-gate-tile .sp-progress { margin: 0 0 6px; }

.ma-gate-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ma-gate-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--vo-ink-soft, #5b6b7a);
}
.ma-gate-tab:hover { border-color: var(--vo-blue, #0081B7); }
.ma-gate-tab.active {
  background: var(--vo-blue, #0081B7);
  border-color: var(--vo-blue, #0081B7);
  color: #fff;
  font-weight: 700;
}
.ma-gate-tab-chip { font-size: 11px; font-weight: 700; opacity: .85; }
.ma-gate-tab.clear:not(.active) { border-color: var(--vo-green, #649954); color: var(--vo-green-dark, #4a7340); }

.ma-gate-secs { display: grid; gap: 6px; margin: 12px 0 0; }
.ma-gate-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 6px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
}
.ma-gate-sec:hover { background: var(--vo-blue-tint, #e0f1f8); }
.ma-gate-sec-name { flex: 1; }

/* ── Deal lifecycle ───────────────────────────────────────────────
   Six phase cards that FIT. This was a horizontally-scrolling flex row on the theory that
   the sequence reads better unbroken — but at any real window width phases V and VI sat
   off-screen behind an auto-hiding Windows scrollbar, so the two phases nobody should
   forget about were the two nobody could see. A grid fits all six across when there is
   room and wraps to whole rows when there isn't; the roman numerals carry the sequence. */
.ma-lifecycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  padding: 4px 2px 10px;
  margin: 0 0 4px;
}
.ma-lc-phase {
  min-width: 0;   /* let a grid column shrink below its content's natural width */
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-top: 3px solid var(--vo-muted, #b9c2cc);
  border-radius: 8px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ma-lc-phase.past { border-top-color: var(--vo-green, #649954); }
.ma-lc-phase.past .ma-lc-num { background: var(--vo-green, #649954); }
.ma-lc-phase.current {
  border-top-color: var(--vo-blue, #0081B7);
  box-shadow: 0 0 0 2px var(--vo-blue-tint, #e0f1f8);
}
.ma-lc-phase.current .ma-lc-num { background: var(--vo-blue, #0081B7); }
.ma-lc-head { display: flex; align-items: flex-start; gap: 10px; }
.ma-lc-num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 6px;
  background: var(--vo-muted, #b9c2cc);
  color: #fff;
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ma-lc-name { font-weight: 700; font-size: 14px; color: var(--vo-ink, #22303c); }
.ma-lc-timing { font-size: 11px; color: var(--vo-ink-soft, #5b6b7a); text-transform: uppercase; letter-spacing: .04em; }
.ma-lc-here {
  flex: none;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--vo-blue, #0081B7); color: #fff;
  border-radius: 999px; padding: 2px 7px;
}
.ma-lc-secs { display: grid; gap: 3px; }
.ma-lc-sec {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left;
  background: none; border: 0;
  padding: 3px 2px;
  font: inherit; font-size: 12.5px;
  color: var(--vo-ink-soft, #5b6b7a);
  cursor: pointer;
  border-radius: 4px;
}
.ma-lc-sec:hover { background: var(--vo-blue-tint, #e0f1f8); color: var(--vo-ink, #22303c); }
.ma-lc-gate {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; text-align: left;
  margin-top: auto;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px dashed var(--vo-yellow, #E5B739);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit; cursor: pointer; color: inherit;
}
.ma-lc-gate.clear { border-style: solid; border-color: var(--vo-green, #649954); background: var(--vo-green-tint, #e6efe2); }
.ma-lc-gate:hover { filter: brightness(.98); }
.ma-lc-gate-icon { flex: none; font-size: 14px; }
.ma-lc-gate-name { font-weight: 700; font-size: 12px; }
.ma-lc-gate-sub { font-size: 11.5px; color: var(--vo-ink-soft, #5b6b7a); }

/* ── The 6-phase flow on the Introduction ───────────────────────────
   Wraps rather than scrolling, for the same reason as the lifecycle. The arrows are
   hidden once it wraps (see the media query below) — an arrow pointing at the end of a
   row is worse than no arrow. */
.ma-phase-flow {
  display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  padding: 2px 0 10px;
}
.ma-phase-card {
  flex: 1 1 150px; min-width: 150px;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-top: 3px solid var(--vo-blue, #0081B7);
  border-radius: 7px;
  padding: 11px 12px;
}
/* Cool → warm across the six phases: pre-announcement analysis through to integration. */
.ma-phase-card.p1 { border-top-color: var(--vo-blue-dark, #005f87); }
.ma-phase-card.p2 { border-top-color: var(--vo-blue, #0081B7); }
.ma-phase-card.p3 { border-top-color: var(--vo-purple, #7a5ea8); }
.ma-phase-card.p4 { border-top-color: var(--vo-yellow, #E5B739); }
.ma-phase-card.p5 { border-top-color: var(--vo-red, #C73127); }
.ma-phase-card.p6 { border-top-color: var(--vo-green, #649954); }
.ma-phase-num {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 15px; color: var(--vo-ink-soft, #5b6b7a);
}
.ma-phase-label { font-weight: 700; font-size: 13px; margin: 1px 0 5px; color: var(--vo-ink, #22303c); }
.ma-phase-body { font-size: 11.5px; line-height: 1.45; color: var(--vo-ink-soft, #5b6b7a); }
.ma-phase-arrow { align-self: center; color: var(--vo-muted, #b9c2cc); font-size: 15px; flex: none; }
.ma-phase-band { display: flex; gap: 4px; margin: 0 0 10px; }
.ma-phase-band-seg {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 4px; text-align: center;
}
.ma-phase-band-seg.pre { flex: 4; background: var(--vo-blue-tint, #e0f1f8); color: var(--vo-blue-dark, #005f87); }
.ma-phase-band-seg.ann { flex: 1; background: #f6e2e0; color: var(--vo-red, #C73127); }
.ma-phase-band-seg.post { flex: 1; background: var(--vo-green-tint, #e6efe2); color: var(--vo-green-dark, #4a7340); }

/* ── Business-case rating strip ───────────────────────────────────
   Very Low → Very High. Colour-graded so a Medium is visibly not a High; the framework
   only works if the rating can disappoint. */
.ma-rating {
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
}
.ma-rating-q {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 14px; color: var(--vo-ink, #22303c); margin-bottom: 9px;
}
.ma-rating-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-rating-pill {
  border: 1px solid var(--vo-border, #dfe4ea);
  background: var(--vo-surface, #fff);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  color: var(--vo-ink-soft, #5b6b7a);
}
.ma-rating-pill:hover:not(:disabled) { border-color: var(--vo-blue, #0081B7); }
.ma-rating-pill:disabled { cursor: default; opacity: .75; }
.ma-rating-pill.active { color: #fff; font-weight: 700; border-color: transparent; }
.ma-rating-pill.r0.active { background: var(--vo-red, #C73127); }
.ma-rating-pill.r1.active { background: #d4653c; }
.ma-rating-pill.r2.active { background: var(--vo-yellow, #E5B739); color: #2a2410; }
.ma-rating-pill.r3.active { background: #9aa845; }
.ma-rating-pill.r4.active { background: var(--vo-green, #649954); }
.ma-rating-pill.r5.active { background: var(--vo-green-dark, #4a7340); }

/* ── Degree of integration ────────────────────────────────────────── */
.ma-degree { margin: 0 0 16px; }
.ma-degree-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 9px;
}
.ma-degree-card {
  text-align: left;
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 8px;
  padding: 12px 13px;
  font: inherit; cursor: pointer; color: inherit;
}
.ma-degree-card:hover:not(:disabled) { border-color: var(--vo-blue, #0081B7); }
.ma-degree-card:disabled { cursor: default; }
.ma-degree-card.active {
  border-color: var(--vo-blue, #0081B7);
  background: var(--vo-blue-tint, #e0f1f8);
  box-shadow: 0 0 0 1px var(--vo-blue, #0081B7) inset;
}
.ma-degree-name { font-weight: 700; font-size: 13.5px; color: var(--vo-ink, #22303c); margin-bottom: 4px; }
.ma-degree-desc { font-size: 11.5px; line-height: 1.45; color: var(--vo-ink-soft, #5b6b7a); }
.ma-degree-chosen {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 19px; color: var(--vo-blue-dark, #005f87); margin: 2px 0 6px;
}

/* ── Target scoring matrix ────────────────────────────────────────── */
.ma-score-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 10px;
}
.ma-score-thresh { font-size: 12.5px; color: var(--vo-ink-soft, #5b6b7a); white-space: nowrap; }
.ma-score-thresh input { margin: 0 4px; }
.ma-score-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ma-score-tbl th.ma-score-crit {
  /* Criteria names are long and there can be six of them, so they stack vertically
     rather than forcing a 1400px-wide table. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 150px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: bottom;
  padding: 8px 3px;
}
.ma-score-cell { text-align: center; padding: 3px !important; }
.ma-score-btn {
  width: 30px; height: 26px;
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 4px;
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.ma-score-btn:disabled { cursor: default; }
.ma-score-btn.yes { background: var(--vo-green-tint, #e6efe2); color: var(--vo-green-dark, #4a7340); border-color: var(--vo-green, #649954); }
.ma-score-btn.no { background: var(--vo-canvas, #f7f9fb); color: var(--vo-muted, #b9c2cc); }
.ma-score-total { text-align: center; white-space: nowrap; }
.sp-tbl-row.ma-score-pass { background: var(--vo-green-tint, #e6efe2); }
.sp-tbl-row.ma-score-pass .ma-score-total b { color: var(--vo-green-dark, #4a7340); }

/* ── Table summary / roll-up footers ─────────────────────────────── */
.ma-tbl-summary { margin: 10px 0 0; }
.ma-sum {
  display: flex; align-items: center; gap: 14px;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-left: 4px solid var(--vo-muted, #b9c2cc);
  border-radius: 8px;
  padding: 11px 14px;
}
.ma-sum.ok { border-left-color: var(--vo-green, #649954); }
.ma-sum.warn { border-left-color: var(--vo-yellow, #E5B739); }
.ma-sum.bad { border-left-color: var(--vo-red, #C73127); }
.ma-sum-big {
  flex: none;
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 24px;
  color: var(--vo-ink, #22303c);
}
.ma-sum-title { font-weight: 700; font-size: 13px; color: var(--vo-ink, #22303c); }

/* Wider inputs for the long free-text columns in the tables. The tables live inside
   .sp-tbl-wrap, which scrolls horizontally, so widening a column costs nothing but a
   scrollbar on a narrow screen — and an unreadable cell costs the user the content. */
.sp-tbl .ma-td-wide { min-width: 210px; }
.sp-tbl .ma-td-xwide { min-width: 420px; }

/* ── Horizontal scrollers ─────────────────────────────────────────
   The wide tables genuinely cannot fit — a 7-column issues log with sentence-length cells
   is wider than any pane. Those may scroll, but the scrollbar has to be VISIBLE: Windows
   overlay scrollbars fade out when idle, which makes a scrollable table look like a table
   that has simply been cut off. So the track is drawn permanently, and a right-edge fade
   signals there is more to the right even before you touch it. */
.sp-tbl-wrap {
  overflow-x: auto;
  scrollbar-width: thin;                                     /* Firefox */
  scrollbar-color: var(--vo-muted, #b9c2cc) var(--vo-canvas, #f7f9fb);
  padding-bottom: 2px;
}
.sp-tbl-wrap::-webkit-scrollbar { height: 11px; }
.sp-tbl-wrap::-webkit-scrollbar-track {
  background: var(--vo-canvas, #f7f9fb);
  border-radius: 6px;
  border: 1px solid var(--vo-border, #dfe4ea);
}
.sp-tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--vo-muted, #b9c2cc);
  border-radius: 6px;
  border: 2px solid var(--vo-canvas, #f7f9fb);
}
.sp-tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--vo-blue, #0081B7); }

/* Status/severity tone on select cells — the same word means the same colour in every
   table, which is what lets you scan an issues log without reading it. */
.ma-tone-critical, .ma-tone-high, .ma-tone-off-track, .ma-tone-blocked, .ma-tone-lost,
.ma-tone-open, .ma-tone-primary {
  color: var(--vo-red, #C73127); font-weight: 700;
}
.ma-tone-medium, .ma-tone-at-risk, .ma-tone-in-progress, .ma-tone-monitoring,
.ma-tone-committed, .ma-tone-important, .ma-tone-secondary {
  color: #a4761c; font-weight: 700;
}
.ma-tone-low, .ma-tone-on-track, .ma-tone-complete, .ma-tone-delivered, .ma-tone-resolved,
.ma-tone-realized, .ma-tone-achieved, .ma-tone-closed, .ma-tone-planned {
  color: var(--vo-green-dark, #4a7340); font-weight: 700;
}

/* ── Synergy model output ─────────────────────────────────────────── */
.ma-syn-head { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
.ma-syn-stat {
  flex: 1 1 110px;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 7px;
  padding: 9px 12px;
}
.ma-syn-stat.hl { border-color: var(--vo-blue, #0081B7); background: var(--vo-blue-tint, #e0f1f8); }
.ma-syn-stat-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vo-ink-soft, #5b6b7a);
}
.ma-syn-stat-val {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 19px; color: var(--vo-ink, #22303c);
}

/* ── Integration workstreams roll-up ─────────────────────────────── */
.ma-ws-tbl th { white-space: nowrap; }
.ma-ws-name { font-weight: 700; white-space: nowrap; }
.ma-ws-cell { text-align: center; white-space: nowrap; }
.ma-ws-cell.zero .ma-ws-num { color: var(--vo-muted, #b9c2cc); }
.ma-ws-num {
  background: none; border: 0;
  font: inherit;
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 17px;
  color: var(--vo-blue-dark, #005f87);
  cursor: pointer;
  padding: 0;
}
.ma-ws-num:disabled { cursor: default; color: var(--vo-muted, #b9c2cc); }
.ma-ws-num:hover:not(:disabled) { text-decoration: underline; }
.ma-ws-cell.flagged { background: #fdf6e3; }
.ma-ws-flag {
  display: block;
  font-size: 10.5px; font-weight: 700;
  color: #a4761c;
}

/* ── Resources: the tool library ──────────────────────────────────
   A browsable catalog, not an upload area. Cards are colour-keyed by source so VisionOne
   IP, the toolkit, outside references, and the team's own additions are distinguishable
   at a glance. */
.ma-res-phase {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vo-blue-dark, #005f87);
  border-bottom: 2px solid var(--vo-blue-tint, #e0f1f8);
  padding: 0 0 5px;
  margin: 22px 0 12px;
}
.ma-res-callout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px;
  background: var(--vo-blue-tint, #e0f1f8);
  border: 1px solid var(--vo-blue, #0081B7);
  border-radius: 8px;
  padding: 9px 13px;
  margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--vo-ink, #22303c);
}
.ma-res-inline-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 700;
  color: var(--vo-blue-dark, #005f87);
  cursor: pointer; text-decoration: underline;
}

.ma-res-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px;
}
.ma-res-search {
  flex: 1 1 260px; min-width: 200px;
  font: inherit; font-size: 13px;
  padding: 7px 11px;
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 6px;
}
.ma-res-filter { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--vo-ink-soft, #5b6b7a); }
.ma-res-filter select {
  font: inherit; font-size: 12.5px;
  padding: 5px 7px;
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 6px;
  max-width: 210px;
}
.ma-res-admin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 0 0 10px;
  background: var(--vo-canvas, #f4f7f3);
  border: 1px dashed var(--vo-border, #dfe4ea);
  border-radius: 8px;
}
.ma-res-count { font-size: 12px; color: var(--vo-ink-soft, #5b6b7a); margin: 0 0 8px; }

.ma-res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0 0 6px;
}
.ma-res-card {
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-left: 4px solid var(--vo-muted, #b9c2cc);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ma-res-card.src-visionone { border-left-color: var(--vo-green, #649954); }
.ma-res-card.src-toolkit { border-left-color: var(--vo-blue, #0081B7); }
.ma-res-card.src-external { border-left-color: var(--vo-purple, #7a5ea8); }
.ma-res-card.src-custom { border-left-color: var(--vo-yellow, #E5B739); }
.ma-res-card.is-hidden { opacity: .55; background: var(--vo-canvas, #f4f7f3); }
.ma-res-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ma-res-kind {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--vo-canvas, #f4f7f3);
  color: var(--vo-ink-soft, #5b6b7a);
  border: 1px solid var(--vo-border, #dfe4ea);
}
.ma-res-kind.app, .ma-res-kind.framework { background: var(--vo-green-tint, #e6efe2); color: var(--vo-green-dark, #4a7340); border-color: var(--vo-green, #649954); }
.ma-res-kind.model, .ma-res-kind.workbook { background: var(--vo-blue-tint, #e0f1f8); color: var(--vo-blue-dark, #005f87); border-color: var(--vo-blue, #0081B7); }
.ma-res-kind.checklist { background: #fdf6e3; color: #8a6d1f; border-color: var(--vo-yellow, #E5B739); }
.ma-res-fmt { font-size: 10.5px; color: var(--vo-muted, #b9c2cc); }
.ma-res-hidden-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: #f6e2e0; color: #8f231c;
}
.ma-res-title {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 14px; line-height: 1.3;
  color: var(--vo-blue-dark, #005f87);
  text-decoration: none;
}
a.ma-res-title:hover { text-decoration: underline; }
.ma-res-title.plain { color: var(--vo-ink, #22303c); }
.ma-res-desc { font-size: 12px; line-height: 1.5; color: var(--vo-ink-soft, #5b6b7a); }
.ma-res-path {
  font-size: 10.5px; line-height: 1.4;
  color: var(--vo-ink-soft, #5b6b7a);
  background: var(--vo-canvas, #f4f7f3);
  border-radius: 5px; padding: 5px 7px;
  overflow-wrap: anywhere;
}
.ma-res-path-label {
  display: block;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 9px; margin-bottom: 2px;
}
.ma-res-path code { font-size: 10.5px; }
.ma-res-secs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; }
.ma-res-secs-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vo-muted, #b9c2cc);
}
.ma-res-sec {
  background: var(--vo-blue-tint, #e0f1f8);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 9px;
  font: inherit; font-size: 11px;
  color: var(--vo-blue-dark, #005f87);
  cursor: pointer;
}
.ma-res-sec:hover { border-color: var(--vo-blue, #0081B7); }
.ma-res-ctl { display: flex; gap: 6px; padding-top: 6px; border-top: 1px solid var(--vo-border, #dfe4ea); }
.ma-res-ctl-btn {
  background: none;
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 6px;
  padding: 3px 10px;
  font: inherit; font-size: 11.5px;
  color: var(--vo-ink-soft, #5b6b7a);
  cursor: pointer;
}
.ma-res-ctl-btn:hover { border-color: var(--vo-blue, #0081B7); color: var(--vo-blue-dark, #005f87); }
.ma-res-ctl-btn.danger:hover { border-color: var(--vo-red, #C73127); color: var(--vo-red, #C73127); }
.ma-res-multi { width: 100%; font: inherit; font-size: 12.5px; padding: 4px; border: 1px solid var(--vo-border, #dfe4ea); border-radius: 6px; }

/* Mark the section group the deal is currently in, in the sidebar. */
.sp-group-label.sp-group-current {
  color: var(--vo-blue-dark, #005f87);
}
.sp-group-label.sp-group-current::after {
  content: ' ● now';
  font-size: 9.5px;
  color: var(--vo-blue, #0081B7);
  letter-spacing: .04em;
}

/* ── Narrow screens ────────────────────────────────────────────────
   Below ~1250px the six intro phase cards cannot sit on one row, so the arrows between
   them would point into a line break. Hide them and let the numerals carry the sequence. */
@media (max-width: 1250px) {
  .ma-phase-arrow { display: none; }
}
@media (max-width: 900px) {
  .ma-gate-strip { grid-template-columns: 1fr; }
  .ma-score-tbl th.ma-score-crit { max-height: 110px; }
}

/* ── Print (PDF export) ──────────────────────────────────────────── */
@media print {
  .ma-gate-tile, .ma-degree-card, .ma-rating-pill, .ma-ws-num, .ma-score-btn { box-shadow: none; }
  .ma-lifecycle, .ma-phase-flow { overflow: visible; flex-wrap: wrap; }
  .sp-tbl-wrap { overflow: visible; }
  .ma-phase-arrow { display: none; }
}

/* ── AI privacy settings card ─────────────────────────────────────────────────────────
   The chip/entity editor and the preview. Kept visually quieter than the rest of Settings
   on purpose: this is a control an admin reads carefully once and rarely revisits, so it
   is optimized for reading rather than for catching the eye. */
.sp-priv-list { margin: 8px 0 4px 0; }
.sp-priv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vo-green-tint, #e6efe2); color: #2f4a27;
  border: 1px solid #cfe0c7; border-radius: 999px;
  padding: 3px 10px; font-size: 13px; line-height: 1.5;
}
.sp-chip-x {
  border: 0; background: transparent; cursor: pointer;
  color: #6b7f63; font-size: 15px; line-height: 1; padding: 0 0 0 2px;
}
.sp-chip-x:hover { color: #a33; }
.sp-priv-add { display: flex; gap: 6px; align-items: center; max-width: 460px; }
.sp-priv-add .sp-w-ctl { flex: 1 1 auto; }
.sp-priv-auto { margin-top: 6px; }
.sp-priv-pats { margin: 4px 0 12px 0; }

.sp-priv-sections {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 18px; margin: 8px 0 4px;
  max-height: 260px; overflow-y: auto;
  border: 1px solid #e3e6e0; border-radius: 8px; padding: 10px 12px;
}
.sp-priv-group-name {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7f63; margin-bottom: 4px;
}
.sp-priv-sec { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; padding: 2px 0; cursor: pointer; }
.sp-priv-sec input { margin-top: 3px; }

.sp-priv-preview { margin: 8px 0; }
.sp-priv-preview textarea { width: 100%; margin-bottom: 8px; }
.sp-priv-out { margin-top: 10px; }
.sp-priv-out-label { font-size: 12px; color: #6b7f63; margin-bottom: 4px; }
.sp-priv-out-text {
  background: #f6f8f4; border: 1px solid #dde5d8; border-radius: 8px;
  padding: 10px 12px; white-space: pre-wrap; word-break: break-word;
  font-size: 13px; line-height: 1.6; margin: 0 0 6px;
}
.sp-priv-caveat {
  margin: 14px 0 4px; padding: 12px 14px;
  background: #fbf7ec; border: 1px solid #e8dfc6; border-radius: 8px;
}
.sp-priv-caveat-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.sp-priv-caveat ul { margin: 0; padding-left: 18px; }
.sp-priv-caveat li { font-size: 13px; line-height: 1.6; margin-bottom: 5px; }
.sp-priv-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* ── Deal pipeline view ─────────────────────────────────────────────
   The same grammar as the NPD portfolio funnel, under an ma- prefix. Kept here rather than shared
   because the two views mean different things — a product funnel is a shortlist and a deal pipeline
   is a load check — and a future divergence in how they LOOK should not require untangling one
   stylesheet used by both. The structure being identical today is a coincidence worth having, not
   a contract. */
.ma-pipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 6px 0 22px;
}
.ma-pipe-col {
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-top: 3px solid var(--vo-blue, #0081B7);
  border-radius: 8px;
  padding: 10px 11px;
  min-width: 0;
}
.ma-pipe-col.empty { border-top-color: var(--vo-muted, #b9c2cc); background: var(--vo-canvas, #f7f9fb); }
.ma-pipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ma-pipe-stage { font-weight: 700; font-size: 12.5px; color: var(--vo-ink, #22303c); }
.ma-pipe-count { font-family: var(--vo-font-heading, Sanchez, serif); font-size: 17px; color: var(--vo-blue-dark, #005f87); }
.ma-pipe-col.empty .ma-pipe-count { color: var(--vo-muted, #b9c2cc); }
.ma-pipe-timing {
  font-size: 10.5px; line-height: 1.35; color: var(--vo-ink-soft, #5b6b7a);
  margin: 2px 0 8px; text-transform: uppercase; letter-spacing: .03em;
}
.ma-pipe-chip {
  display: block; width: 100%; text-align: left;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 6px;
  padding: 7px 9px; margin-bottom: 5px;
  font: inherit; cursor: pointer; color: inherit;
}
.ma-pipe-chip:hover { border-color: var(--vo-blue, #0081B7); }
.ma-pipe-chip.current { border-color: var(--vo-blue, #0081B7); background: var(--vo-blue-tint, #e0f1f8); }
.ma-pipe-chip-name { display: block; font-weight: 700; font-size: 12.5px; }
.ma-pipe-chip-meta { display: block; font-size: 11px; color: var(--vo-ink-soft, #5b6b7a); }

.ma-pipe-head2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 18px 0 8px;
}
.ma-pipe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-tbl-row.ma-row-current { background: var(--vo-blue-tint, #e0f1f8); }
.ma-row-flag { font-size: 11px; font-weight: 700; color: #a4761c; margin-top: 2px; }
.ma-gate-name2 { font-size: 12.5px; font-weight: 700; }
.ma-pct { min-width: 92px; }
.ma-pct .sp-progress { margin: 4px 0 0; }
.ma-side-all2 {
  display: block; width: 100%; margin-top: 6px;
  background: none; border: 0; padding: 2px 0;
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--vo-blue-dark, #005f87);
  text-align: left; cursor: pointer;
}
.ma-side-all2:hover { text-decoration: underline; }

@media (max-width: 900px) { .ma-pipe { grid-template-columns: repeat(2, 1fr); } }