/* ============================================================================
   MatchPlan.ai — application layout, built on the MatchIQ design system.
   Tokens + base components come from ds/colors_and_type.css + ds/components.css.
   This file adds the app shell, sidebar, chat onboarding, prep report, login,
   and the screen-specific furniture. Theme-aware (light + dark) throughout.
   ============================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* pitchiq#375 — the shared shell launcher (position: fixed; right: 20px) jumps left by the
   scrollbar's own width on a page tall enough to scroll: `right` resolves against html's
   clientWidth, which a visible scrollbar narrows (measured: 20px on /briefs, 30px on Setup).
   `stable` makes the fixed-position layout reserve that gutter on every page, scrolling or not,
   so a page crossing the scroll threshold doesn't shift the launcher. */
html { scrollbar-gutter: stable; }
/* evolve-suite#1302 F4 — the Switching Loader is a fixed full-viewport layer, but `stable` above narrows html's client
   width by the gutter (measured: a 1270 px loader in a 1280 px viewport), leaving its centred label 5 px left of centre.
   The loader has nothing to scroll, so while one is on the page the gutter goes. */
html:has(.evsh-switching-loader) { scrollbar-gutter: auto; }
body { background: var(--bg-app); color: var(--fg-1); font-family: var(--font-primary); }
#root { min-height: 100%; }
button { font-family: inherit; }
a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 3px solid var(--bg-app); }
::selection { background: var(--bg-light-blue); }

/* page-fade between routes */
.mp-fade { animation: mpFade .28s var(--ease-out-quart); }
@keyframes mpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- Shell -- */
.mp-shell { display: flex; min-height: 100vh; }

.mp-side-usage { margin: 14px 6px 4px; }
.mp-usage-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mp-usage-label b { font-family: var(--font-numbers); font-weight: 500; color: var(--fg-1); }
.mp-usage-reset { margin-top: 6px; font-size: var(--fs-caption, 11px); color: var(--fg-3); }

@keyframes mpPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* mobile bottom bar + top bar */
.mp-bottombar { display: none; }
.mp-mobiletop { display: none; }
[data-theme='dark'] .mp-logo__mark { filter: brightness(0) invert(1); }

/* evolve-suite#1409 — the two logo lockups (ui.jsx EvolveSuiteLogo on sign-in, Logo in the in-app top bars),
   drawn from the Suite's lockup component. Every measure is that component's px divided by its 16.579px
   wordmark, so it scales with the `size` prop: mark 37.333px, mark-to-word gap 12.444px, word gap 6.632px,
   line 17.684px, tracking 1.3705px (EVOLVE) and 1.0611px (the bold product word: SUITE / EDGE), divider
   0.878 x 14.056px. Ink #090b0f and divider rgba(9,11,15,.25) are the logo's own brand colours (raw in
   Figma, no token). EVOLVE is Lato 500 in Figma; Edge ships no Lato 500 face, so it renders at 400, the
   same documented trade-off the Suite app makes. */
.mp-logo { display: inline-flex; align-items: center; gap: 0.7506em; user-select: none; font-family: var(--font-primary); }
.mp-logo__mark { width: 2.2518em; height: 2.2518em; flex-shrink: 0; }
.mp-logo__word { display: inline-flex; align-items: center; gap: 0.4em; line-height: 1.0667; color: #090b0f; white-space: nowrap; }
.mp-logo__evolve { font-weight: 500; letter-spacing: 0.0827em; }
.mp-logo__product { font-weight: 700; letter-spacing: 0.064em; }
.mp-logo__rule { width: 0.053em; height: 0.8478em; background: rgba(9, 11, 15, 0.25); }

/* ------------------------------------------------------------- Main area -- */
/* #316 — the shared support widget's dock is a fixed aside (not a flex child, as the old app-local
   dock was); it publishes its width on <html>, and this margin keeps the "content shrinks beside
   the dock" feel. 0 when not docked. */
.mp-main { flex: 1; min-width: 0; padding: 38px 44px 80px; margin-right: var(--evsh-support-dock-width, 0px); }
.mp-container { width: 100%; margin: 0 auto; }
.mp-w-xl { max-width: 600px; }
.mp-w-2xl { max-width: 720px; }
.mp-w-3xl { max-width: 820px; }
.mp-w-5xl { max-width: 1040px; }
.mp-w-6xl { max-width: 1160px; }

.mp-pagehead { margin-bottom: 28px; }
.mp-pagehead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mp-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--fg-2); font-weight: 700; font-size: var(--fs-subtitle-3); cursor: pointer; padding: 0; margin-bottom: 12px; transition: color var(--transition-fast); }
.mp-back:hover { color: var(--fg-1); }
.mp-pagehead h1 { margin: 0; }
.mp-pagehead__sub { color: var(--fg-2); font-size: var(--fs-body-1); margin: 8px 0 0; max-width: 60ch; }
.mp-greeting-num { font-family: var(--font-numbers); }

/* eyebrow label */
.mp-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-subtitle-4); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.mp-eyebrow.is-gold { color: var(--gold-0); }
.mp-eyebrow.is-green { color: var(--green-0); }
.mp-pill-eyebrow { padding: 5px 11px 5px 9px; border-radius: var(--radius-full); background: var(--accent-soft); }

/* ------------------------------------------------------------- Cards ------ */
.mp-card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.mp-card__pad { padding: 24px 26px; }
.mp-card__pad-sm { padding: 16px 18px; }
.mp-card--quiet { box-shadow: none; background: var(--bg-sunken); }
.mp-card--outline { box-shadow: none; border: 2px solid var(--border-1); }

.mp-stack { display: flex; flex-direction: column; gap: 20px; }
.mp-row { display: flex; align-items: center; gap: 12px; }

/* section card with icon header */
.mp-section__head { display: flex; align-items: center; gap: 12px; }
.mp-section__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.mp-section__title { margin: 0; }
.mp-section__sub { color: var(--fg-2); font-size: var(--fs-body-2); margin: 6px 0 0 46px; }
.mp-section__body { margin-top: 18px; }

/* ------------------------------------------------------- Dashboard stats -- */
.mp-stats { display: flex; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.mp-stat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mp-stat + .mp-stat { border-left: 2px solid var(--border-1); }
.mp-stat__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 26px; height: 100%; }
.mp-stat__head { display: flex; align-items: center; gap: 9px; font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-2); }
.mp-dot { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; }
.mp-stat__value { color: var(--fg-1); line-height: 1; }
.mp-stat__sub { font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); margin-top: 6px; }
.mp-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-subtitle-3); font-weight: 700; color: var(--green-0); margin-top: 4px; }
[data-theme='dark'] .mp-stat__delta { color: var(--green-3); }

/* quick start */
.mp-resume-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; background: var(--bg-surface); border: 2px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 18px; margin-bottom: 22px; font-family: var(--font-primary); transition: box-shadow var(--transition-fast); }
.mp-resume-card:hover { box-shadow: var(--shadow-lg); }
.mp-resume-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.mp-resume-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-resume-card__t { font-weight: 900; font-size: var(--fs-subtitle-1); color: var(--fg-1); }
.mp-resume-card__s { font-size: var(--fs-body-3); color: var(--fg-2); }
.mp-resume-card__cta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--accent); font-weight: 900; font-size: var(--fs-subtitle-2); }
.mp-quickstart { position: relative; }
.mp-quickstart .mp-card__pad { display: flex; flex-direction: column; gap: 18px; }
.mp-quickstart__bg { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, var(--accent-soft)); opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------- Tables ----- */
.mp-tablewrap { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.mp-tablehead { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 2px solid var(--border-1); }
.mp-tablehead h2 { margin: 0; }
.mp-link { color: var(--link); font-weight: 700; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; font-size: var(--fs-subtitle-3); display: inline-flex; align-items: center; gap: 5px; }
.mp-link:hover { text-decoration: underline; }
.mp-cellflex { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-prep-row { cursor: pointer; transition: background-color var(--transition-fast); }
.mp-prep-row:hover { background: var(--bg-sunken); }
.mp-prep-row td { vertical-align: middle; }
.mp-prospect-name { font-weight: 700; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-prospect-sub { font-size: var(--fs-body-3); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-td-insight { color: var(--fg-2); max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-empty { padding: 56px 20px; text-align: center; color: var(--fg-2); }
.mp-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg-sunken); color: var(--fg-3); margin-bottom: 12px; }

/* ----------------------------------------------------------- Buttons +++ -- */
/* size + icon helpers layered on .tm-btn */
.tm-btn--sm { height: 38px; font-size: var(--fs-subtitle-3); padding: 0 14px; }
.tm-btn--lg { height: 50px; font-size: var(--fs-subtitle-1); padding: 0 22px; }
.tm-btn--block { width: 100%; }
.tm-btn--dark { background: var(--bg-inverse); color: var(--fg-inverse); }
.tm-btn--dark:hover:not(:disabled) { opacity: .9; }
.tm-btn--danger { background: var(--bg-light-pink); color: var(--red-1); }
[data-theme='dark'] .tm-btn--danger { background: rgba(212,84,99,.2); color: var(--red-4); }
/* "Prepare anyway" — solid amber so forcing a thin brief is unmistakable */
.tm-btn--warn { background: var(--orange-1); color: var(--white); }
.tm-btn--warn:hover:not(:disabled) { background: var(--orange-0); }

/* ---- Refer & earn page ---- */
.mp-ref-share__lbl { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-subtitle-2); color: var(--fg-1); margin-bottom: 12px; }
.mp-ref-share__lbl svg { color: var(--accent); }
.mp-ref-share { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-ref-share__input { flex: 1 1 280px; min-width: 0; height: 44px; padding: 0 14px; border: 2px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-sunken); color: var(--fg-1); font-family: var(--font-numbers); font-size: var(--fs-body-1); outline: none; }
.mp-ref-share__input:focus { border-color: var(--accent); }
.mp-ref-share__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.mp-ref-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-full); border: 2px solid var(--border-2); background: var(--bg-surface); color: var(--fg-1); font-family: inherit; font-weight: 700; font-size: var(--fs-body-2); cursor: pointer; transition: all var(--transition-fast); }
.mp-ref-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mp-ref-chip svg { color: var(--accent); }
.mp-ref-share__code { font-size: var(--fs-body-3); color: var(--fg-3); }
.mp-ref-share__code b { font-family: var(--font-numbers); color: var(--fg-1); letter-spacing: 1px; }
.mp-ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mp-ref-stat { background: var(--bg-surface); border: 1px solid var(--border-1, var(--border-2)); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.mp-ref-stat__icon { width: 38px; height: 38px; border-radius: var(--radius-lg); display: grid; place-items: center; margin-bottom: 4px; }
.mp-ref-stat__icon--blue { background: var(--bg-light-blue); color: var(--blue-0); }
.mp-ref-stat__icon--green { background: var(--green-2, #d6f0e0); color: var(--green-0, #1a7f4b); }
.mp-ref-stat__icon--gold { background: var(--accent-soft); color: var(--gold-0); }
.mp-ref-stat__num { font-family: var(--font-numbers); font-size: var(--fs-headline-2, 28px); color: var(--fg-1); line-height: 1; }
.mp-ref-stat__lbl { font-size: var(--fs-body-2); color: var(--fg-2); }
.mp-ref-how__head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-subtitle-2); color: var(--fg-1); margin-bottom: 14px; }
.mp-ref-how__head svg { color: var(--accent); }
.mp-ref-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.mp-ref-how li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-body-1); color: var(--fg-1); line-height: 1.5; }
.mp-ref-how__n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; margin-top: 1px; }
.mp-ref-how__fine { margin: 16px 0 0; font-size: var(--fs-body-3); color: var(--fg-3); line-height: 1.5; }
@media (max-width: 640px) { .mp-ref-stats { grid-template-columns: 1fr; } }
.tm-btn svg { flex-shrink: 0; }

.mp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-lg); border: 2px solid var(--border-2); background: var(--bg-surface); color: var(--fg-1); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.mp-iconbtn:hover { border-color: var(--blue-4); }

/* ------------------------------------------------------------- Fields ----- */
.mp-field { display: flex; flex-direction: column; gap: 7px; }
.mp-field__label { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.mp-field__label span { font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); }
.mp-field__opt { font-size: var(--fs-body-3); color: var(--fg-3); font-weight: 400; }
.mp-field__hint { font-size: var(--fs-body-3); color: var(--fg-2); padding: 0 2px; margin: 0; }
.mp-textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--border-2); border-radius: var(--radius-lg);
  background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-primary);
  font-size: var(--fs-body-1); line-height: 1.55; resize: vertical; outline: none;
  transition: border-color var(--transition-fast);
}
.mp-textarea::placeholder { color: var(--fg-3); }
.mp-textarea:focus { border-color: var(--accent); }
.mp-select-wrap { position: relative; }
.mp-select-wrap > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-2); pointer-events: none; }
.mp-select { appearance: none; height: 44px; width: 100%; padding: 0 40px 0 14px; border: 2px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-primary); font-size: var(--fs-body-2); cursor: pointer; outline: none; transition: border-color var(--transition-fast); }
.mp-select:focus { border-color: var(--accent); }
.mp-input-affix { position: relative; }
.mp-input-affix .tm-input { padding-right: 92px; }
.mp-input-paste { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 32px; }

/* form card */
.mp-formcard { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.mp-formgroup { display: flex; flex-direction: column; gap: 16px; }
.mp-formgroup__head { display: flex; align-items: center; gap: 10px; }
.mp-formgroup__head h3 { margin: 0; font-size: var(--fs-subtitle-1); font-weight: 900; color: var(--fg-1); }
.mp-formgroup__head .mp-section__icon { width: 30px; height: 30px; }
.mp-formgroup__sub { font-size: var(--fs-body-3); color: var(--fg-2); }
.mp-formdiv { height: 2px; background: var(--border-1); border: 0; margin: 4px 0; }

/* repeatable contact rows */
.mp-contacts { display: flex; flex-direction: column; gap: 12px; }
.mp-contact { border: 2px solid var(--border-1); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-sunken); display: flex; flex-direction: column; gap: 12px; animation: mpFade .22s var(--ease-out-quart); }
.mp-contact__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-contact__idx { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-subtitle-3); font-weight: 900; color: var(--fg-2); }
.mp-contact__idx .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--font-numbers); font-size: 12px; }
.mp-contact__del { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-3); padding: 4px 6px; border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); }
.mp-contact__del:hover { color: var(--red-1); background: var(--bg-light-pink); }
[data-theme='dark'] .mp-contact__del:hover { color: var(--red-4); background: rgba(212,84,99,.16); }
.mp-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-addperson { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 2px dashed var(--border-2); border-radius: var(--radius-lg); background: transparent; color: var(--fg-2); cursor: pointer; font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-subtitle-3); transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); }
.mp-addperson:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
@media (max-width: 560px) { .mp-contact__grid { grid-template-columns: 1fr; } }

/* stakeholders (who you're meeting) */
.mp-stake__role { font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.mp-stake__contact { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-body-3); color: var(--fg-3); margin-top: 6px; }

/* ----------------------------------------------------------- Research ----- */
.mp-research { display: flex; flex-direction: column; gap: 2px; }
.mp-research__step { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.mp-research__dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--bg-sunken); color: var(--fg-3); transition: all var(--transition-normal); }
.mp-research__dot.is-done { background: var(--bg-light-green); color: var(--green-0); }
.mp-research__dot.is-active { background: var(--accent-soft); color: var(--accent); }
[data-theme='dark'] .mp-research__dot.is-done { background: rgba(95,197,117,.2); color: var(--green-3); }
.mp-research__label { font-size: var(--fs-body-1); color: var(--fg-3); transition: color var(--transition-fast); }
.mp-research__step.is-on .mp-research__label { color: var(--fg-1); font-weight: 700; }
.mp-spinner { display: block; width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mpSpin .7s linear infinite; }
@keyframes mpSpin { to { transform: rotate(360deg); } }
.mp-tinydot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ----------------------------------------------------- Prep report bits --- */
.mp-snapshot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mp-snapshot__story { margin: 18px 0 0; font-size: var(--fs-body-1); line-height: 1.65; color: var(--fg-1); }
.mp-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--border-1); }
.mp-substat__k { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-3); color: var(--fg-2); margin-bottom: 5px; }
.mp-substat__v { font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); }

.mp-agenda { list-style: none; margin: 0; padding: 0; }
.mp-agenda li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border-1); }
.mp-agenda li:first-child { padding-top: 0; } .mp-agenda li:last-child { padding-bottom: 0; border-bottom: 0; }
.mp-agenda__time { flex-shrink: 0; width: 104px; font-family: var(--font-numbers); font-size: var(--fs-body-3); color: var(--accent); padding-top: 1px; }
.mp-agenda__label { font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); }
.mp-agenda__detail { font-size: var(--fs-body-2); color: var(--fg-2); line-height: 1.55; margin-top: 3px; }

.mp-pitch { display: flex; flex-direction: column; gap: 14px; }
.mp-pitch__item { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.mp-pitch__num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-sm); font-family: var(--font-numbers); font-size: 15px; color: var(--accent); }
.mp-pitch__h { font-size: var(--fs-subtitle-1); font-weight: 900; color: var(--fg-1); margin: 2px 0 0; }
.mp-pitch__body { font-size: var(--fs-body-2); color: var(--fg-2); line-height: 1.6; margin: 7px 0 0; }
.mp-pitch__why { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--accent-soft); font-size: var(--fs-body-2); color: var(--fg-1); line-height: 1.5; }
.mp-pitch__why svg { color: var(--gold-1); flex-shrink: 0; margin-top: 2px; }

.mp-obj { display: flex; flex-direction: column; gap: 10px; }
.mp-obj__item { border: 2px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.mp-obj__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--fg-1); transition: background-color var(--transition-fast); }
.mp-obj__q:hover { background: var(--bg-sunken); }
.mp-obj__qtext { display: flex; align-items: center; gap: 11px; font-size: var(--fs-subtitle-2); font-weight: 700; }
.mp-obj__qtext svg { color: var(--fg-3); flex-shrink: 0; }
.mp-obj__chev { color: var(--fg-2); transition: transform var(--transition-fast); flex-shrink: 0; }
.mp-obj__chev.is-open { transform: rotate(180deg); }
.mp-obj__a { padding: 0 16px 16px 42px; }
.mp-obj__a > div { padding-left: 14px; border-left: 2px solid var(--accent); color: var(--fg-2); font-size: var(--fs-body-2); line-height: 1.6; }

.mp-teamgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mp-teamcard { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.mp-teamcard__name { font-size: var(--fs-subtitle-2); font-weight: 900; color: var(--fg-1); }
.mp-teamcard__role { font-size: var(--fs-body-3); color: var(--fg-2); }
.mp-teamcard__reason { font-size: var(--fs-body-2); color: var(--fg-1); line-height: 1.5; margin-top: 8px; }
.mp-fit { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-lg); }
.mp-fit.is-good { background: var(--bg-light-green); } .mp-fit.is-escalate { background: var(--bg-light-gold); }
[data-theme='dark'] .mp-fit.is-good { background: rgba(95,197,117,.16); } [data-theme='dark'] .mp-fit.is-escalate { background: rgba(253,210,101,.16); }
.mp-fit svg { flex-shrink: 0; margin-top: 2px; }
.mp-fit.is-good svg { color: var(--green-0); } .mp-fit.is-escalate svg { color: var(--gold-0); }
[data-theme='dark'] .mp-fit.is-good svg { color: var(--green-3); } [data-theme='dark'] .mp-fit.is-escalate svg { color: var(--gold-3); }
.mp-fit__title { font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); }
.mp-fit__text { font-size: var(--fs-body-2); color: var(--fg-1); line-height: 1.5; margin-top: 3px; }

/* sticky action bar */
.mp-actionbar { position: sticky; bottom: 16px; z-index: 20; }
.mp-actionbar .mp-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; box-shadow: var(--shadow-lg); flex-wrap: wrap; }

/* findings list (deep-research signals) */
.mp-findings { display: flex; flex-direction: column; }
.mp-finding { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border-1); }
.mp-finding:last-child { border-bottom: 0; }
.mp-finding__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.mp-finding__text { font-size: var(--fs-body-1); color: var(--fg-1); line-height: 1.5; }
.mp-finding__src { font-size: var(--fs-body-3); color: var(--fg-3); margin-top: 3px; }

/* ------------------------------------------------------ Post-call bits ---- */
.mp-verdict { padding: 24px 26px; border-radius: var(--radius-lg); display: flex; gap: 18px; align-items: center; }
.mp-verdict.t-green { background: var(--bg-light-green); }
.mp-verdict.t-gold { background: var(--bg-light-gold); }
.mp-verdict.t-red { background: var(--bg-light-pink); }
.mp-verdict__h { margin: 4px 0 0; font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-heading-2); line-height: 1.1; }
.mp-verdict.t-green .mp-verdict__h, .mp-verdict.t-green .mp-verdict__icon svg { color: var(--green-0); }
.mp-verdict.t-gold .mp-verdict__h, .mp-verdict.t-gold .mp-verdict__icon svg { color: var(--gold-0); }
.mp-verdict.t-red .mp-verdict__h, .mp-verdict.t-red .mp-verdict__icon svg { color: var(--red-1); }
[data-theme='dark'] .mp-verdict.t-green .mp-verdict__h, [data-theme='dark'] .mp-verdict.t-green .mp-verdict__icon svg { color: var(--green-3); }
[data-theme='dark'] .mp-verdict.t-gold .mp-verdict__h, [data-theme='dark'] .mp-verdict.t-gold .mp-verdict__icon svg { color: var(--gold-3); }
[data-theme='dark'] .mp-verdict.t-red .mp-verdict__h, [data-theme='dark'] .mp-verdict.t-red .mp-verdict__icon svg { color: var(--red-4); }
.mp-verdict__eyebrow { font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.mp-verdict__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-sm); flex-shrink: 0; }
.mp-verdict__label { margin: 4px 0 0; }
.mp-waveform { display: flex; align-items: center; gap: 6px; height: 56px; }
.mp-wave-bar { width: 6px; border-radius: 99px; background: var(--accent); animation: mpWave 1s ease-in-out infinite; transform-origin: center; }
@keyframes mpWave { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.mp-moments { list-style: none; margin: 0; padding: 0; }
.mp-moments li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-1); }
.mp-moments li:first-child { padding-top: 0; } .mp-moments li:last-child { padding-bottom: 0; border-bottom: 0; }
.mp-moments__t { flex-shrink: 0; width: 52px; font-family: var(--font-numbers); font-size: var(--fs-body-3); color: var(--accent); padding-top: 1px; }
.mp-moments__x { font-size: var(--fs-body-2); color: var(--fg-1); line-height: 1.5; }
.mp-checklist { display: flex; flex-direction: column; }
.mp-checkitem { display: flex; align-items: center; gap: 12px; padding: 11px 0; cursor: pointer; text-align: left; background: none; border: 0; }
.mp-checkbox { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); color: #fff; transition: all var(--transition-fast); }
.mp-checkitem:hover .mp-checkbox { border-color: var(--accent); }
.mp-checkbox.is-done { background: var(--accent); border-color: var(--accent); }
.mp-checkitem__text { font-size: var(--fs-body-1); color: var(--fg-1); }
.mp-checkitem__text.is-done { color: var(--fg-3); text-decoration: line-through; }
.mp-email { border-radius: var(--radius-lg); background: var(--bg-sunken); padding: 16px 18px; }
.mp-email pre { margin: 0; font-family: var(--font-primary); font-size: var(--fs-body-2); color: var(--fg-1); line-height: 1.65; white-space: pre-wrap; }
.mp-strategy-banner { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--accent-soft); margin-bottom: 16px; }
.mp-strategy-banner svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.mp-strategy-banner p { margin: 0; font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); }
.mp-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px; border-radius: var(--radius-lg); border: 2px dashed var(--border-2); background: var(--bg-sunken); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.mp-dropzone:hover, .mp-dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.mp-dropzone svg { color: var(--fg-2); }

/* ------------------------------------------------------- Upgrade plans ---- */
.mp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.mp-plans.is-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1040px) { .mp-plans.is-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mp-plans.is-4 { grid-template-columns: 1fr; } }
.mp-billtoggle-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.mp-billtoggle-hint { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-2); color: var(--fg-2); }
.mp-billtoggle-hint svg { color: var(--accent); }
.mp-billtoggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border-radius: var(--radius-full); background: var(--bg-surface); border: 2px solid var(--border-2); box-shadow: var(--shadow-sm); }
.mp-billtoggle button { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--fg-1); font-family: var(--font-primary); font-weight: 800; font-size: var(--fs-subtitle-2); padding: 10px 22px; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); }
.mp-billtoggle button:hover:not(.is-on) { background: var(--bg-sunken); }
.mp-billtoggle button.is-on { background: var(--accent); color: var(--fg-on-accent); box-shadow: var(--shadow-sm); }
.mp-billtoggle__save { font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .02em; background: var(--bg-light-green); color: var(--green-0); padding: 3px 9px; border-radius: var(--radius-full); }
.mp-billtoggle button.is-on .mp-billtoggle__save { background: rgba(255,255,255,.24); color: #fff; }
[data-theme='dark'] .mp-billtoggle__save { background: rgba(95,197,117,.2); color: var(--green-3); }
.mp-save-chip { display: inline-flex; align-items: center; font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .02em; color: var(--green-0); background: var(--bg-light-green); padding: 4px 8px; border-radius: var(--radius-full); }
[data-theme='dark'] .mp-save-chip { background: rgba(95,197,117,.18); color: var(--green-3); }
.mp-plan__briefs { font-family: var(--font-numbers); }
.mp-plan { position: relative; background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.mp-plan.is-featured { outline: 2px solid var(--accent); }
.mp-plan__pad { padding: 24px 24px 26px; }
.mp-plan__badge { position: absolute; top: 0; right: 18px; background: var(--accent); color: var(--fg-on-accent); font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; padding: 5px 11px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.mp-plan__price { font-family: var(--font-numbers); font-size: var(--fs-number-2); color: var(--fg-1); line-height: 1; }
.mp-plan__per { font-size: var(--fs-body-2); color: var(--fg-2); }
.mp-plan__feats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mp-plan__feats li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-2); color: var(--fg-1); }
.mp-plan__feats svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* --------------------------------------------------------------- Login ---- */
.mp-login { display: flex; min-height: 100vh; background: var(--bg-surface); }
.mp-login__left { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 0 28px; }
.mp-login__wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 392px; }
.mp-login__anim { width: 100%; display: flex; flex-direction: column; gap: 24px; animation: mpLoginIn .42s var(--ease-out-quart); }
@keyframes mpLoginIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-login__greet { display: flex; flex-direction: column; gap: 3px; }
.mp-login__tag { font-family: var(--font-numbers); font-size: 24px; line-height: 1.4; color: var(--accent); margin: 0; }
.mp-login__fields { display: flex; flex-direction: column; gap: 16px; }
.mp-login__foot { display: flex; gap: 12px; align-items: center; padding: 24px 0; font-size: var(--fs-body-3); color: var(--fg-2); flex-wrap: wrap; }
.mp-login__foot a { text-decoration: none; } .mp-login__foot a:hover { text-decoration: underline; }
.mp-login__right { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 44px; overflow: hidden; background: linear-gradient(to bottom, var(--blue-4), transparent 70%); }
.mp-login__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mp-login__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,32,47,.82) 0%, rgba(0,32,47,.34) 42%, transparent 70%); z-index: 1; }
.mp-login__promo { position: relative; z-index: 2; color: #fff; max-width: 460px; }
.mp-login__promo h2 { color: #fff; font-size: 30px; line-height: 1.18; margin: 0 0 18px; }
.mp-login__promo .mp-promo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.mp-login__promo .mp-promo-list li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-body-1); color: rgba(255,255,255,.92); line-height: 1.45; }
.mp-login__promo .mp-promo-list svg { flex-shrink: 0; margin-top: 2px; color: var(--blue-4); }
.mp-login__promo .mp-promo-eyebrow { display: inline-block; font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-4); margin-bottom: 12px; }
.mp-inboxnote { display: flex; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg-light-green); }
[data-theme='dark'] .mp-inboxnote { background: rgba(95,197,117,.16); }
.mp-inboxnote svg { color: var(--green-0); flex-shrink: 0; margin-top: 1px; }
[data-theme='dark'] .mp-inboxnote svg { color: var(--green-3); }
.mp-inboxnote b { color: var(--fg-1); }
.mp-inboxnote span { color: var(--fg-1); font-size: var(--fs-body-2); line-height: 1.5; }
.mp-research-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-body-3); font-weight: 700; }

/* --------------------------------------------------------- Onboarding ----- */
/* Onboarding surface (#103, spec qVlF9gmcp7): white page background. Scoped to
   .mp-onb, which pages-newbrief.jsx does NOT use for its own page -- it borrows
   only .mp-onb__bar, left untouched below. */
.mp-onb { display: flex; flex-direction: column; height: 100vh; background: #fff; }
/* pitchiq#208 — inside OnboardingShell (nav.jsx), `.mp-onb` is a flex ITEM of `.mp-shell`
   (`.mp-shell { display: flex; }`), and a flex item with no `flex` property sizes to its own
   content (shrink-to-fit) rather than filling the row — unlike `.mp-main`, which states `flex: 1`
   itself. Without this, .mp-onb's white background and centered content would size to whatever
   its narrowest child needs instead of spanning the remaining viewport width beside the sidebar,
   same failure shape `.mp-main` already guards against. Scoped to `.mp-shell--onboarding` so
   .mp-onb's other two call sites (app.jsx's loading/refused screens, rendered with no `.mp-shell`
   ancestor at all) are untouched. */
.mp-shell--onboarding .mp-onb { flex: 1; min-width: 0; }
.mp-draftsaved { display: inline-flex; align-items: center; gap: 4px; color: var(--green-1); font-weight: 700; }
[data-theme='dark'] .mp-draftsaved { color: var(--green-3); }
.mp-resumed { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: var(--radius-lg); background: var(--accent-soft); font-size: var(--fs-body-2); font-weight: 700; margin-bottom: 4px; }
.mp-resumed > span { color: var(--accent); }
.mp-resumed__fresh { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-3); padding: 6px 11px; border-radius: var(--radius-full); cursor: pointer; box-shadow: var(--shadow-sm); }
.mp-resumed__fresh:hover { color: var(--accent); }
.mp-onb__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--bg-surface); border-bottom: 2px solid var(--border-1); flex-shrink: 0; }
.mp-onb__bar-r { display: flex; align-items: center; gap: 14px; }
.mp-onb__progress { font-size: var(--fs-body-3); color: var(--fg-2); }
/* pitchiq#400 round 2 — a container-query ancestor for `.mp-interview`'s own collapse below
   (near the checklist rules). The Refine step's chat+checklist grid is fixed-width in its second
   column, and the EXISTING `@media (max-width: 720px)` collapse only reacts to the raw VIEWPORT
   width — but `.mp-onb`'s own rendered width can be far narrower than the viewport once docked
   (a 384px pinned dock at 1024px wide leaves this scroll region only ~302px), and a media query
   cannot see that. `container-type: inline-size` here is what lets a `@container` rule react to
   `.mp-onb__scroll`'s OWN width instead. */
.mp-onb__scroll { flex: 1; overflow-y: auto; container-type: inline-size; }
.mp-onb__thread { max-width: 760px; margin: 0 auto; padding: 30px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.mp-msg { display: flex; gap: 12px; max-width: 100%; animation: mpFade .3s var(--ease-out-quart); }
.mp-msg.is-user { flex-direction: row-reverse; }
.mp-msg__av { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.mp-msg__av.is-ai { background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.mp-msg__av.is-ai img { width: 22px; height: 22px; }
.mp-msg__bubble { max-width: 78%; padding: 13px 16px; border-radius: 16px; font-size: var(--fs-body-1); line-height: 1.55; }
.mp-msg.is-ai .mp-msg__bubble { background: var(--bg-surface); box-shadow: var(--shadow-sm); border-top-left-radius: 5px; color: var(--fg-1); }
.mp-msg.is-user .mp-msg__bubble { background: var(--accent); color: var(--fg-on-accent); border-top-right-radius: 5px; }
.mp-msg__bubble p { margin: 0; } .mp-msg__bubble p + p { margin-top: 9px; }
.mp-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.mp-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); animation: mpTyping 1.2s infinite ease-in-out; }
.mp-typing i:nth-child(2) { animation-delay: .18s; } .mp-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes mpTyping { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* research card inside chat */
.mp-onb__research { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.mp-onb__research .mp-eyebrow { margin-bottom: 12px; }

/* file chips dropped in composer */
.mp-attach-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-attach { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-md); background: var(--bg-light-blue); color: var(--blue-0); font-size: var(--fs-body-3); font-weight: 700; }
[data-theme='dark'] .mp-attach { background: rgba(124,196,242,.18); color: var(--blue-4); }
.mp-attach svg { flex-shrink: 0; }
.mp-attach button { background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; padding: 0; opacity: .65; }
.mp-attach button:hover { opacity: 1; }

/* quick reply chips */
.mp-quickwrap { display: flex; flex-direction: column; gap: 10px; padding-left: 46px; }
.mp-quickwrap .mp-quickreplies { padding-left: 0; }
.mp-quickwrap__hint { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: var(--fs-subtitle-3); color: var(--accent); font-weight: 900; background: var(--accent-soft); padding: 7px 13px; border-radius: var(--radius-full); animation: mpHintBob 2.6s var(--ease-out-quart) infinite; }
@keyframes mpHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mp-quickwrap__hint { animation: none; } }
.mp-quickwrap__hint svg { color: var(--accent); }
.mp-quickwrap__label { font-size: var(--fs-body-3); color: var(--fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mp-quickreplies { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 46px; }
.mp-quickreply { padding: 9px 14px; border-radius: var(--radius-full); border: 2px dashed var(--border-2); background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-subtitle-3); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); }
.mp-quickreply:hover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); color: var(--accent); }

/* composer */
.mp-composer { flex-shrink: 0; border-top: 2px solid var(--border-1); background: var(--bg-surface); }
.mp-composer__inner { max-width: 760px; margin: 0 auto; padding: 14px 24px 18px; display: flex; flex-direction: column; gap: 10px; }
.mp-composer__box { display: flex; align-items: flex-end; gap: 10px; border: 2px solid var(--border-2); border-radius: var(--radius-xl); padding: 8px 8px 8px 14px; background: var(--bg-surface); transition: border-color var(--transition-fast); }
.mp-composer__box:focus-within { border-color: var(--accent); }
.mp-composer__box.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.mp-composer textarea { flex: 1; border: 0; outline: none; resize: none; background: transparent; font-family: var(--font-primary); font-size: var(--fs-body-1); line-height: 1.5; color: var(--fg-1); padding: 8px 0; max-height: 140px; }
.mp-composer textarea::placeholder { color: var(--fg-3); }
.mp-composer__actions { display: flex; align-items: center; gap: 6px; }
.mp-composer__send { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); border: 0; background: var(--accent); color: var(--fg-on-accent); cursor: pointer; flex-shrink: 0; transition: opacity var(--transition-fast); }
.mp-composer__send:disabled { opacity: .4; cursor: not-allowed; }
.mp-composer__attach { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); border: 0; background: transparent; color: var(--fg-2); cursor: pointer; }
.mp-composer__attach:hover { background: var(--bg-sunken); color: var(--fg-1); }
.mp-composer__hint { font-size: var(--fs-body-3); color: var(--fg-3); text-align: center; }

/* profile preview card built by the AI */
.mp-profilecard { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.mp-profilecard__kv { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.mp-profilecard__row .k { font-size: var(--fs-subtitle-4); text-transform: uppercase; letter-spacing: .03em; color: var(--fg-3); margin-bottom: 3px; }
.mp-profilecard__row .v { font-size: var(--fs-body-1); color: var(--fg-1); line-height: 1.5; }

/* ----------------------------------------------------------- Settings ----- */
.mp-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 24px; align-items: start; }
.mp-set-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mp-setcard__head { display: flex; align-items: center; gap: 12px; }
.mp-setcard__head .mp-section__icon { margin-right: 0; }
.mp-setcard__titles { flex: 1; min-width: 0; }
.mp-setcard__titles h3 { margin: 0; }
.mp-feeds { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; }
.mp-setcard__help { margin: 10px 0 0; font-size: var(--fs-body-2); color: var(--fg-2); line-height: 1.5; }
.mp-setcard__body { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.mp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* tag input */
.mp-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 2px solid var(--border-2); border-radius: var(--radius-lg); padding: 8px; background: var(--bg-surface); transition: border-color var(--transition-fast); }
.mp-tags:focus-within { border-color: var(--accent); }
.mp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-subtitle-3); }
.mp-tag button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .6; }
.mp-tag button:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mp-tags input { flex: 1; min-width: 100px; border: 0; outline: none; background: transparent; font-family: var(--font-primary); font-size: var(--fs-body-2); color: var(--fg-1); padding: 6px 4px; }
.mp-tags input::placeholder { color: var(--fg-3); }
.mp-taghint { font-size: var(--fs-body-3); color: var(--fg-3); margin: 6px 2px 0; }

/* segmented tone control */
.mp-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--bg-sunken); border-radius: var(--radius-lg); }
.mp-seg button { border: 0; background: transparent; color: var(--fg-2); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-subtitle-3); padding: 8px 14px; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.mp-seg button.is-on { background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* live system-prompt preview */
.mp-prompt { position: sticky; top: 24px; display: flex; flex-direction: column; }
.mp-prompt__bar { display: flex; align-items: center; gap: 9px; padding: 0 2px 12px; }
.mp-prompt__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--green-1); }
.mp-prompt__livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-3); box-shadow: 0 0 0 0 rgba(95,197,117,.6); animation: mpPulse 1.8s infinite; }
@keyframes mpPulse { 0% { box-shadow: 0 0 0 0 rgba(95,197,117,.5); } 70% { box-shadow: 0 0 0 7px rgba(95,197,117,0); } 100% { box-shadow: 0 0 0 0 rgba(95,197,117,0); } }
.mp-prompt__card { background: #021a28; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.mp-prompt__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mp-prompt__dots { display: flex; gap: 6px; }
.mp-prompt__dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mp-prompt__file { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #6f8a9a; }
.mp-prompt__copy { display: inline-flex; align-items: center; gap: 6px; border: 0; background: rgba(255,255,255,.08); color: #cfe0ea; font-family: var(--font-primary); font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer; }
.mp-prompt__copy:hover { background: rgba(255,255,255,.16); }
.mp-prompt__pre { margin: 0; padding: 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.72; white-space: pre-wrap; word-break: break-word; color: #aab8be; max-height: 62vh; overflow: auto; }
.mp-prompt__pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-color: transparent; }
.mp-pp-h { color: #fdd265; font-weight: 700; }
.mp-pp-k { color: #7f97a5; }
.mp-pp-v { color: #7cc4f2; }
.mp-prompt__foot { margin: 12px 2px 0; font-size: var(--fs-body-3); color: var(--fg-2); line-height: 1.5; }
.mp-prompt__foot svg { color: var(--accent); vertical-align: -2px; margin-right: 4px; }

/* unsaved save bar */
.mp-savebar { position: sticky; bottom: 16px; z-index: 25; margin-top: 4px; }
.mp-savebar .mp-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; box-shadow: var(--shadow-lg); }
.mp-savebar__msg { display: flex; align-items: center; gap: 9px; font-size: var(--fs-subtitle-2); font-weight: 700; color: var(--fg-1); }
.mp-savebar__msg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); flex-shrink: 0; }

@media (max-width: 1040px) {
  .mp-settings-grid { grid-template-columns: 1fr; }
  .mp-prompt { position: static; }
  .mp-prompt__pre { max-height: none; }
  .mp-grid-2 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- Briefs lib -- */
.mp-briefs-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mp-search { position: relative; flex: 1; min-width: 220px; }
.mp-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.mp-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; border: 2px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-primary); font-size: var(--fs-body-2); outline: none; transition: border-color var(--transition-fast); }
.mp-search input:focus { border-color: var(--accent); }
.mp-search input::placeholder { color: var(--fg-3); }

.mp-selbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius-lg); background: var(--bg-inverse); color: var(--fg-inverse); margin-bottom: 14px; animation: mpFade .18s var(--ease-out-quart); }
.mp-selbar__count { font-weight: 900; font-size: var(--fs-subtitle-2); }
.mp-selbar__count b { font-family: var(--font-numbers); font-weight: 500; }
.mp-selbar .tm-btn--secondary { background: rgba(255,255,255,.14); color: var(--fg-inverse); }
.mp-selbar .tm-btn--secondary:hover:not(:disabled) { background: rgba(255,255,255,.24); }
.mp-selbar__x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-inverse); cursor: pointer; opacity: .8; }
.mp-selbar__x:hover { opacity: 1; background: rgba(255,255,255,.14); }

/* checkbox cell */
.mp-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); background: var(--bg-surface); color: #fff; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; }
.mp-check:hover { border-color: var(--accent); }
.mp-check.is-on { background: var(--accent); border-color: var(--accent); }
.mp-th-check, .mp-td-check { width: 20px; padding-right: 0 !important; }
.tm-table tr.is-selected td { background: var(--accent-soft); }
.mp-rowdel { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-3); cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); }
.mp-rowdel:hover { color: var(--red-1); background: var(--bg-light-pink); }
[data-theme='dark'] .mp-rowdel:hover { color: var(--red-4); background: rgba(212,84,99,.16); }
.mp-people-mini { display: inline-flex; align-items: center; }
.mp-people-mini .tm-avatar, .mp-people-mini .mp-av-soft { margin-left: -7px; box-shadow: 0 0 0 2px var(--bg-surface); }
.mp-people-mini .tm-avatar:first-child, .mp-people-mini .mp-av-soft:first-child { margin-left: 0; }
.tm-table tr.is-selected .mp-people-mini .tm-avatar, .tm-table tr.is-selected .mp-people-mini .mp-av-soft { box-shadow: 0 0 0 2px var(--accent-soft); }

/* confirm dialog */
.mp-modal-scrim { position: fixed; inset: 0; background: rgba(0,32,47,.5); backdrop-filter: blur(2px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; animation: mpFade .16s ease; }
.mp-modal { width: 100%; max-width: 420px; background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 26px; animation: mpPop .16s var(--ease-out-quart); }
.mp-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-lg); background: var(--bg-light-pink); color: var(--red-1); margin-bottom: 14px; }
[data-theme='dark'] .mp-modal__icon { background: rgba(212,84,99,.18); color: var(--red-4); }

/* ---------------------------------------------------------- Responsive --- */
/* Suite shell (pitchiq #70): the shell package hides itself below 1024px
   (its own CSS) and expects the host's own mobile nav below that point — so
   Edge's mobile/desktop switch moves from 980px to 1024px to match, deliberately
   taking the whole block (including the non-nav rules below) with it rather
   than splitting the breakpoint. `.mp-sidebar` is gone (nav.jsx's ShellNav
   replaces it; the shell's own CSS handles ITS visibility, not this rule). */
@media (min-width: 1024px) {
  /* Desktop offset for the fixed-position suite shell rail — SHELL_TOTAL_WIDTH
     (328px), read at runtime into --shell-width by nav.jsx's Shell composer.
     Gated on .mp-shell--nav-ready (also set by Shell, only once the shell
     context has actually resolved) so a permanently-failed /api/shell fetch
     degrades to a full-width <main> instead of a permanent blank gutter with
     no nav (review §9) — never applied while ShellNav itself renders null. */
  .mp-shell--nav-ready .mp-main { margin-left: var(--shell-width, 328px); }
  /* pitchiq#208 — the same offset, for onboarding's OWN full-height layout instead of .mp-main.
     `.mp-onb` (Onboarding block above) is not wrapped in `.mp-main`/`.mp-container` — Edge
     Onboarding's "should not alter the existing content layout... or responsive behavior"
     forbids adding .mp-main's 38/44/80 padding and .mp-container's 1160px max-width around it,
     and nesting a second 100vh region inside a padded box would double-scroll. Figma's
     onboarding frames (T51wh9ODKWVeqS1lLXRmkb `41:12017`) confirm the shape: each is exactly a
     328px "Sidebar" beside a "Body" that starts flush at its right edge with no extra inset, so
     `.mp-onb` gets the same margin-left `.mp-main` gets and nothing more. Same nav-ready gate as
     above — a permanently-failed /api/shell fetch degrades to full-width, never a blank gutter. */
  .mp-shell--onboarding.mp-shell--nav-ready .mp-onb { margin-left: var(--shell-width, 328px); }
  /* pitchiq#400 HIGH #2 — the pinned support dock (the SAME `.mp-main` reservation above, #316)
     also needs to be cleared here: a dock pinned from Coach (the shared `evolve_support_ui`
     cookie) otherwise covers the Review step's "Start prepping" row and the Refine step's
     checklist/Send/Finish row at 1024 and 1440. `.mp-onb` is `flex: 1; min-width: 0` (Onboarding
     block above), the same shape `.mp-main` is, so `margin-right` shrinks its available width the
     same way — not the over-constrained-block-width case a bare `width: 100%` box would hit.
     Verified in headless Chromium against the real CSS (pitchiq#400 review). Not gated on
     `.mp-shell--nav-ready`: the dock's own width var defaults to 0px undocked/unresolved, so
     nothing here depends on the shell context having loaded. */
  .mp-shell--onboarding .mp-onb { margin-right: var(--evsh-support-dock-width, 0px); }
  /* pitchiq#400 — clears the shared support launcher (evolve-shell `.evsh-support-launcher`:
     position: fixed, right: 20px, bottom: 20px, 52x52 at this desktop width; below 1024 it sits
     at bottom: 74px + safe-area instead, in the next block). `.mp-create, .mp-setup` (below)
     already end in exactly 72px of their OWN padding-bottom — an EXACT touch with the launcher's
     72px (20+52) reserved zone, not a margin. Horizontally, `.mp-create__actions`
     (`justify-content: flex-end`) and the launcher land at the SAME right edge only near this
     1024px breakpoint, where `.mp-setup--wide`'s 760px cap does not yet bind (1024 - 328 sidebar
     = 696 available); past roughly 1100px wide the cap DOES bind, `.mp-setup` centres instead of
     filling, and a growing gap opens up — this fix does not depend on that alignment holding at
     every width, only on the vertical clearance below, which the property does regardless.
     `.mp-onb__scroll`'s own overflow makes its padding part of its scrollable height, so this
     adds a full second reserved-zone's worth of real headroom below that touch point — on THIS
     page only, not `.mp-create`/`.mp-setup` themselves, which are shared with pages that have no
     floating launcher to clear. See web/test/onboarding-launcher-clearance.test.js for the
     derivation, verified in headless Chromium against the real CSS (pitchiq#400 review). */
  .mp-onb__scroll {
    --onb-launcher-clearance: 72px; /* .evsh-support-launcher: bottom 20px + 52px height */
    padding-bottom: var(--onb-launcher-clearance);
  }
}
@media (max-width: 1023px) {
  .mp-mobiletop { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 40; background: var(--bg-surface); border-bottom: 2px solid var(--border-1); padding: 12px 16px; }
  .mp-mobiletop__r { display: flex; align-items: center; gap: 8px; }
  .mp-bottombar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--bg-surface); border-top: 2px solid var(--border-1); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mp-bottombar button { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; cursor: pointer; color: var(--fg-2); font-family: var(--font-primary); font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: var(--radius-md); }
  .mp-bottombar button.is-active { color: var(--accent); }
  .mp-main { padding: 24px 18px 96px; }
  /* pitchiq#400 HIGH #1 — below 1024, OnboardingShell mounts no `MobileBottom` (unlike Shell's
     other pages), so nothing already reserves space at the bottom, and the launcher moves to
     `.evsh-support-launcher`'s own mobile position (bottom: 74px + safe-area, still 52px tall —
     evolve-shell.css). The desktop block above's 72px extra padding is NOT enough here: reviewer
     measured a REAL 48px vertical overlap with the Review step's "Start prepping" button (and a
     smaller one with the Refine step's Send button) at 390 wide before this fix. Stacked on top
     of `.mp-create`/`.mp-setup`'s own pre-existing 72px trailing padding, this extra 74px clears
     both — verified in headless Chromium at 390x844 across all four onboarding phases, 0 hits,
     no added horizontal scroll (pitchiq#400 review). */
  .mp-onb__scroll {
    --onb-launcher-clearance: calc(74px + env(safe-area-inset-bottom)); /* .evsh-support-launcher: bottom 74px + safe-area below 1024, same 52px height */
    padding-bottom: var(--onb-launcher-clearance);
  }
  .mp-statgrid { grid-template-columns: repeat(3, 1fr); }
  .mp-teamgrid { grid-template-columns: 1fr; }
  .mp-plans { grid-template-columns: 1fr; }
  .mp-stats { flex-wrap: wrap; }
  .mp-stat { flex: 1 1 50%; min-width: 50%; }
  .mp-stat:nth-child(3) { border-left: 0; }
  .mp-login__right { display: none; }
}
@media (max-width: 560px) {
  .mp-statgrid { grid-template-columns: 1fr 1fr; }
  .mp-msg__bubble { max-width: 84%; }
}
@media (max-width: 760px) {
  .mp-capgrid { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   Pre-Sales Agent — re-imagined onboarding, create flows & brief extras
   ========================================================================== */

/* ---- shared centered "hero" scaffold (create + setup) ---- */
.mp-create, .mp-setup { max-width: 640px; margin: 0 auto; padding: 46px 24px 72px; display: flex; flex-direction: column; gap: 22px; }
.mp-create--wide, .mp-setup--wide { max-width: 760px; }
/* Inside the app Shell (sidebar + chatbot present), the main area already pads
   and widths the content — let the flow fill it instead of re-padding/centering. */
.mp-shell .mp-create { max-width: 100%; padding: 4px 0 24px; }
.mp-create__hero, .mp-setup__hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.mp-create__hero h1, .mp-setup__hero h1 { margin: 0; text-wrap: balance; }
.mp-create__sub, .mp-setup__sub { margin: 0; color: var(--fg-2); font-size: var(--fs-body-1); line-height: 1.5; max-width: 48ch; }
.mp-create__nudge { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg-2); font-size: var(--fs-body-2); }
.mp-create__nudge svg { color: var(--accent); flex-shrink: 0; }
/* prominent "thin context" warning — amber callout, hard to miss */
.mp-create__warn {
  width: 100%; display: flex; align-items: flex-start; gap: 11px; margin: 0;
  padding: 14px 16px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 15%, var(--bg-surface));
  border: 2px solid var(--warning);
  color: var(--fg-1); font-size: var(--fs-body-2); font-weight: 600; line-height: 1.5;
  animation: mp-warn-pop .28s cubic-bezier(.16,1,.3,1);
}
.mp-create__warn svg { color: var(--warning); flex-shrink: 0; margin-top: 1px; }
@keyframes mp-warn-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mp-create__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

/* ---- smart box (paste anything) ---- */
.mp-bigbox { display: flex; flex-direction: column; border: 2px solid var(--border-2); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-card); padding: 16px 16px 12px; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.mp-bigbox:focus-within { border-color: var(--accent); }
.mp-bigbox.is-drag { border-color: var(--accent); background: var(--accent-soft); }
/* warned thin-context state: amber border (wins over focus) so it's obvious */
.mp-bigbox.is-warn, .mp-bigbox.is-warn:focus-within { border-color: var(--orange-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-1) 22%, transparent); }
.mp-bigbox textarea { border: 0; outline: none; resize: none; background: transparent; font-family: var(--font-primary); font-size: var(--fs-subtitle-1); line-height: 1.5; color: var(--fg-1); width: 100%; min-height: 92px; }
.mp-bigbox textarea::placeholder { color: var(--fg-3); }
.mp-bigbox__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mp-bigbox__attach { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--fg-2); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-2); padding: 8px 10px; border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); }
.mp-bigbox__attach:hover { color: var(--accent); background: var(--accent-soft); }

.mp-examplechips { display: flex; flex-direction: column; gap: 11px; align-items: center; }
.mp-examplechips__lbl { font-size: var(--fs-body-3); color: var(--fg-3); }
.mp-examplechips__row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.mp-examplechip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-full); border: 2px dashed var(--border-2); background: var(--bg-surface); color: var(--fg-1); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-2); cursor: pointer; transition: all var(--transition-fast); }
.mp-examplechip:hover { border-color: var(--accent); border-style: solid; color: var(--accent); background: var(--accent-soft); }
.mp-examplechip svg { color: var(--accent); flex-shrink: 0; }

/* "the more context, the better" guide on the new-brief page */
.mp-ctxguide { width: 100%; background: var(--bg-sunken); border: 2px solid var(--border-2); border-radius: var(--radius-xl); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.mp-ctxguide__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-body-1); color: var(--fg-1); }
.mp-ctxguide__title svg { color: var(--accent); flex-shrink: 0; }
.mp-ctxguide__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.mp-ctxguide__item { display: flex; align-items: flex-start; gap: 11px; text-align: left; }
.mp-ctxguide__item > svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mp-ctxguide__item b { display: block; font-size: var(--fs-body-2); font-weight: 700; color: var(--fg-1); }
.mp-ctxguide__item span { display: block; font-size: var(--fs-body-3); color: var(--fg-2); line-height: 1.45; }
.mp-ctxguide__item--btn { background: none; border: 0; cursor: pointer; padding: 6px; margin: -6px; border-radius: var(--radius-md); font-family: inherit; transition: background-color var(--transition-fast); }
.mp-ctxguide__item--btn:hover { background: var(--accent-soft); }
.mp-ctxguide__item--btn:hover b { color: var(--accent); }
.mp-ctxguide__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-top: 13px; border-top: 1px solid var(--border-2); }
.mp-ctxguide__exlbl { font-size: var(--fs-body-3); color: var(--fg-3); margin-right: 2px; }
@media (max-width: 640px) { .mp-ctxguide__list { grid-template-columns: 1fr; } }

/* optional "who you're meeting" people editor on the new-brief page */
.mp-people { width: 100%; background: var(--bg-surface); border: 2px solid var(--border-2); border-radius: var(--radius-xl); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mp-people__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mp-people__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-body-1); color: var(--fg-1); }
.mp-people__title svg { color: var(--accent); }
.mp-people__opt { font-size: var(--fs-body-3); font-weight: 600; color: var(--fg-3); background: var(--bg-sunken); padding: 2px 8px; border-radius: var(--radius-full); }
.mp-people__rec { font-size: var(--fs-body-3); font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 2px 9px; border-radius: var(--radius-full); letter-spacing: .01em; }
.mp-people__hint { font-size: var(--fs-body-3); color: var(--fg-2); }
.mp-people__tip { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: var(--fs-body-3); color: var(--fg-2); line-height: 1.45; }
.mp-people__tip svg { color: var(--gold-0); flex-shrink: 0; margin-top: 1px; }
.mp-people__tip b { color: var(--fg-1); }
.mp-people__rows { display: flex; flex-direction: column; gap: 9px; }
.mp-person-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.4fr auto; gap: 9px; align-items: center; }
.mp-person-row__in { min-width: 0; height: 42px; padding: 0 12px; border: 2px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-sunken); color: var(--fg-1); font-family: var(--font-primary); font-size: var(--fs-body-2); outline: none; transition: border-color var(--transition-fast); }
.mp-person-row__in:focus { border-color: var(--accent); }
.mp-person-row__in--name { font-weight: 600; }
.mp-person-row__rm { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--fg-3); cursor: pointer; transition: all var(--transition-fast); }
.mp-person-row__rm:hover { background: var(--bg-light-pink, var(--bg-sunken)); color: var(--red-1, var(--fg-1)); }
.mp-people__add { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 2px dashed var(--border-2); border-radius: var(--radius-lg); background: transparent; color: var(--fg-1); font-family: inherit; font-weight: 700; font-size: var(--fs-body-2); cursor: pointer; transition: all var(--transition-fast); }
.mp-people__add:hover { border-color: var(--accent); border-style: solid; color: var(--accent); background: var(--accent-soft); }
.mp-people__add svg { color: var(--accent); }
@media (max-width: 640px) { .mp-person-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; } .mp-person-row__rm { grid-column: 2; grid-row: 1; } }

/* ---- structured brief-creation form ---- */
.mp-create--form { max-width: 720px; }
.mp-bfcard { width: 100%; background: var(--bg-surface); border: 2px solid var(--border-2); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 13px; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.mp-bfcard.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.mp-bfcard__head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-subtitle-1); color: var(--fg-1); }
.mp-bfcard__head > svg { color: var(--accent); flex-shrink: 0; }
.mp-bfcard__opt { font-size: var(--fs-body-3); font-weight: 600; color: var(--fg-3); background: var(--bg-sunken); padding: 2px 8px; border-radius: var(--radius-full); }
.mp-bfcard__hint { margin: -4px 0 2px; font-size: var(--fs-body-3); color: var(--fg-2); line-height: 1.45; }
.mp-bfcard__attach { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px dashed var(--border-2); border-radius: var(--radius-lg); background: transparent; color: var(--fg-1); font-family: inherit; font-weight: 700; font-size: var(--fs-body-2); cursor: pointer; transition: all var(--transition-fast); }
.mp-bfcard__attach:hover { border-color: var(--accent); border-style: solid; color: var(--accent); background: var(--accent-soft); }
.mp-bfcard__attach svg { color: var(--accent); }
.mp-bfcard__attachhint { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: var(--fs-body-3); color: var(--fg-2); line-height: 1.45; }
.mp-bfcard__attachhint svg { color: var(--fg-3); flex-shrink: 0; margin-top: 1px; }
.mp-bfcard__attachhint b { color: var(--fg-1); }
.mp-bf-submit { display: flex; justify-content: flex-end; }
.mp-person-row--4 { grid-template-columns: 1.1fr 1.2fr 1.3fr 1.4fr auto; }
@media (max-width: 640px) { .mp-person-row--4 { grid-template-columns: 1fr auto; } }

/* ---- forward an invite ---- */
.mp-invitebox { border: 2px solid var(--border-2); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-card); overflow: hidden; transition: border-color var(--transition-fast); }
.mp-invitebox:focus-within, .mp-invitebox.is-drag { border-color: var(--accent); }
.mp-invitebox__head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 2px solid var(--border-1); background: var(--bg-sunken); color: var(--fg-2); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-2); }
.mp-invitebox__head svg { color: var(--accent); }
.mp-invitebox textarea { width: 100%; border: 0; outline: none; resize: vertical; background: transparent; font-family: var(--font-primary); font-size: var(--fs-body-1); line-height: 1.6; color: var(--fg-1); padding: 16px; min-height: 184px; }
.mp-invitebox textarea::placeholder { color: var(--fg-3); }

.mp-invite-detected { position: relative; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; border-top: 4px solid var(--green-2); }
.mp-invite-name { font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-heading-3); color: var(--fg-1); border: 0; border-bottom: 2px solid transparent; background: transparent; outline: none; width: 100%; padding: 2px 0; }
.mp-invite-name:focus { border-bottom-color: var(--accent); }
.mp-invite-url { border: 0; border-bottom: 2px solid transparent; background: transparent; outline: none; color: var(--fg-2); font-family: var(--font-primary); font-size: var(--fs-body-3); width: 100%; padding: 2px 0; }
.mp-invite-url:focus { border-bottom-color: var(--accent); }
.mp-invite-people { display: flex; flex-direction: column; gap: 11px; border-top: 2px solid var(--border-1); padding-top: 16px; }
.mp-invite-people__lbl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-subtitle-4); font-weight: 900; color: var(--fg-2); text-transform: uppercase; letter-spacing: .03em; }
.mp-invite-people__lbl svg { color: var(--accent); }
.mp-invite-person { display: flex; align-items: center; gap: 9px; }

/* ---- pick a meeting ---- */
.mp-calchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius-full); background: var(--bg-light-green); color: var(--green-0); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-3); }
[data-theme='dark'] .mp-calchip { color: var(--green-3); }
.mp-calchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-1); box-shadow: 0 0 0 3px rgba(84,169,102,.25); }
.mp-meetlist { display: flex; flex-direction: column; gap: 12px; }
.mp-meetcard { display: flex; align-items: stretch; gap: 16px; width: 100%; text-align: left; padding: 16px 18px; border: 2px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); cursor: pointer; transition: all .16s var(--ease-out-quart); }
.mp-meetcard:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.mp-meetcard__when { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 80px; padding: 8px 6px; border-radius: var(--radius-md); background: var(--bg-sunken); flex-shrink: 0; }
.mp-meetcard__when.is-soon { background: var(--accent-soft); }
.mp-meetcard__day { font-size: var(--fs-body-3); font-weight: 900; color: var(--fg-2); }
.mp-meetcard__when.is-soon .mp-meetcard__day { color: var(--accent); }
.mp-meetcard__time { font-family: var(--font-numbers); font-size: var(--fs-subtitle-2); color: var(--fg-1); white-space: nowrap; }
.mp-meetcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.mp-meetcard__top { display: flex; align-items: center; gap: 10px; }
.mp-meetcard__co { display: block; font-weight: 900; font-size: var(--fs-subtitle-1); color: var(--fg-1); }
.mp-meetcard__people { display: block; font-size: var(--fs-body-3); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meetcard__ctx { font-size: var(--fs-body-2); color: var(--fg-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-meetcard__cta { display: inline-flex; align-items: center; gap: 6px; align-self: center; flex-shrink: 0; color: var(--accent); font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-body-2); }

/* ---- generating view ---- */
.mp-genwrap { max-width: 560px; margin: 0 auto; padding: 64px 24px; }
.mp-genwrap__inner { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }

/* ---- setup (onboarding) ---- */
.mp-setup__card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 22px; }
.mp-setup__editnote { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-body-3); }
.mp-setup__editnote svg { color: var(--accent); }
.mp-profileform { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.mp-profileform__context { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--accent-soft); }
.mp-pf-ctx__co { font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-subtitle-1); color: var(--fg-1); }
.mp-pf-ctx__chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.mp-pf-ctx__chips span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-body-3); color: var(--fg-2); }
.mp-pf-ctx__chips svg { color: var(--accent); }
.mp-pf-group { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.mp-pf-group--accent { box-shadow: var(--shadow-card); border-top: 4px solid var(--accent); }
.mp-pf-group__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-subtitle-1); color: var(--fg-1); flex-wrap: wrap; }
.mp-pf-group__head svg { color: var(--accent); flex-shrink: 0; }
.mp-pf-group__why { font-weight: 400; font-size: var(--fs-body-3); color: var(--fg-2); }
.mp-seg--wrap { display: flex; flex-wrap: wrap; }

/* ---- "inferred" chip on confirm fields ---- */
.mp-infer-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: var(--fs-subtitle-4); font-weight: 700; letter-spacing: .01em; color: var(--gold-0); background: var(--bg-light-gold); vertical-align: middle; }
.mp-infer-chip svg { flex-shrink: 0; }
[data-theme='dark'] .mp-infer-chip { color: var(--gold-3); }

/* ---- text button that reads as a link ---- */
.mp-linklike { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-primary); font-size: inherit; font-weight: 700; color: var(--accent); }
.mp-linklike:hover { text-decoration: underline; }
.mp-linklike svg { flex-shrink: 0; }

/* ---- guided onboarding interview ---- */
.mp-interview { display: grid; grid-template-columns: 1fr 264px; gap: 18px; align-items: start; text-align: left; }
.mp-chat { display: flex; flex-direction: column; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; min-height: 340px; }
.mp-chat__msgs { display: flex; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; max-height: 52vh; min-height: 240px; }
.mp-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
.mp-msg--user { justify-content: flex-end; }
.mp-msg__ava { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.mp-msg__bubble { padding: 10px 14px; border-radius: 16px; font-size: var(--fs-body-1); line-height: 1.5; color: var(--fg-1); max-width: 82%; white-space: pre-wrap; }
.mp-msg--assistant .mp-msg__bubble { background: var(--bg-sunken); border-bottom-left-radius: 5px; }
.mp-msg--user .mp-msg__bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.mp-msg__bubble--typing { display: inline-flex; gap: 4px; align-items: center; }
.mp-msg__bubble--typing span { width: 6px; height: 6px; border-radius: 99px; background: var(--fg-3); animation: mp-typing 1.1s infinite ease-in-out; }
.mp-msg__bubble--typing span:nth-child(2) { animation-delay: .18s; }
.mp-msg__bubble--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes mp-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.mp-chat__composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--border-1); background: var(--bg-surface); }
.mp-chat__composer textarea { flex: 1; border: 0; outline: none; resize: none; background: transparent; font-family: var(--font-primary); font-size: var(--fs-body-1); line-height: 1.5; color: var(--fg-1); max-height: 140px; min-height: 24px; }
.mp-chat__composer textarea::placeholder { color: var(--fg-3); }
.mp-chat__send { flex-shrink: 0; padding-left: 12px; padding-right: 12px; }
.mp-checklist { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; position: sticky; top: 18px; }
.mp-checklist__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-body-1); color: var(--fg-1); }
.mp-checklist__head span { font-family: var(--font-numbers); font-size: var(--fs-body-2); color: var(--fg-2); }
.mp-checklist__item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body-2); color: var(--fg-3); transition: color var(--transition-fast); }
.mp-checklist__item.is-on { color: var(--fg-1); font-weight: 600; }
.mp-checklist__dot { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 99px; background: var(--bg-sunken); color: var(--fg-3); }
.mp-checklist__item.is-on .mp-checklist__dot { background: var(--green-0); color: #fff; }
[data-theme='dark'] .mp-checklist__item.is-on .mp-checklist__dot { background: var(--green-3); color: var(--bg-app); }
.mp-checklist__actions { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (max-width: 720px) {
  .mp-interview { grid-template-columns: 1fr; }
  .mp-checklist { position: static; order: -1; }
}
/* pitchiq#400 round 2 — the SAME collapse, reacting to `.mp-onb__scroll`'s own rendered width
   (see its `container-type: inline-size` above) instead of the viewport. A pinned support dock
   narrows this page without narrowing the viewport at all — undocked 1024/1440 never hit this,
   but a 384px dock at 1024px wide leaves the scroll region ~302px, well under the 720px media
   query's own threshold, and the two-column grid overflowed: the checklist column ended up on
   TOP of the chat composer's Send button, unreachable to a real click — verified in headless
   Chromium during review, not by web/test/onboarding-interview-grid.test.js, which is CSS text
   only and cannot see actual layout or click delivery (a bounding-box overlap check alone would
   not catch this either — the checklist visually SITS OVER the button rather than beside it).
   560, not 720: measured at a 562px container (just above this threshold), the chat column is
   still 232px and usable — so this is a genuinely NARROWER threshold than the viewport one on
   purpose, tuned to when the grid itself stops fitting rather than to a device-class breakpoint.
   Verified in headless Chromium (pitchiq#400 round-2 review): undocked 1024/1440 unchanged;
   docked 1024/384 and 1440/620 both collapse to one column and the Send/Finish buttons become
   reachable again. */
@container (max-width: 560px) {
  .mp-interview { grid-template-columns: 1fr; }
  .mp-checklist { position: static; order: -1; }
}

/* ---- 30-second game plan (top of brief) ---- */
.mp-gameplan { background: var(--accent-soft); border-radius: var(--radius-lg); padding: 22px 24px; }
.mp-gameplan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mp-gameplan__badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-primary); font-weight: 900; font-size: var(--fs-subtitle-1); color: var(--accent); }
.mp-gameplan__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-gp-item { background: var(--bg-surface); border-radius: var(--radius-md); padding: 14px 16px; }
.mp-gp-item__k { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--fg-2); }
.mp-gp-item__k svg { color: var(--accent); }
.mp-gp-item p { margin: 8px 0 0; font-size: var(--fs-body-1); color: var(--fg-1); line-height: 1.5; }
.mp-gp-item--watch .mp-gp-item__k svg { color: var(--gold-0); }
[data-theme='dark'] .mp-gp-item--watch .mp-gp-item__k svg { color: var(--gold-3); }

/* ---- smart questions ---- */
.mp-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-questions li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-sunken); }
.mp-questions__num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-sm); font-family: var(--font-numbers); font-size: var(--fs-body-2); color: var(--accent); }
.mp-questions__text { font-size: var(--fs-body-1); color: var(--fg-1); line-height: 1.5; }

/* ---- role marks (roles to consider bringing) ---- */
.mp-rolemark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0; }
.mp-rolemark--blue { background: var(--bg-light-blue); color: var(--blue-0); }
.mp-rolemark--gold { background: var(--bg-light-gold); color: var(--gold-0); }
.mp-rolemark--green { background: var(--bg-light-green); color: var(--green-0); }
.mp-rolemark--purple { background: var(--bg-light-purple); color: var(--purple-0); }
[data-theme='dark'] .mp-rolemark--blue { color: var(--blue-3); }
[data-theme='dark'] .mp-rolemark--gold { color: var(--gold-3); }
[data-theme='dark'] .mp-rolemark--green { color: var(--green-3); }
[data-theme='dark'] .mp-rolemark--purple { color: var(--purple-3); }

@media (max-width: 560px) {
  .mp-gameplan__grid { grid-template-columns: 1fr; }
  .mp-meetcard { flex-direction: column; gap: 12px; }
  .mp-meetcard__when { flex-direction: row; gap: 8px; min-width: 0; align-self: flex-start; padding: 6px 12px; }
  .mp-meetcard__cta { align-self: flex-start; }
  .mp-create__actions { justify-content: stretch; }
  .mp-create__actions .tm-btn { flex: 1; }
}