/* ─────────────────────────────────────────────────────────────
   Parcl9 Capital Stack Modeling
   Matches the Parcl9 site design tokens exactly.
───────────────────────────────────────────────────────────── */

:root {
  --p9cs-bg:          #ffffff;
  --p9cs-bg-subtle:   #f5f2eb;
  --p9cs-bg-warm:     #fdf9f3;
  --p9cs-border:      rgba(154, 111, 46, 0.18);
  --p9cs-border-md:   rgba(154, 111, 46, 0.28);
  --p9cs-gold:        #9a6f2e;
  --p9cs-gold-hover:  #b8883e;
  --p9cs-gold-light:  rgba(154, 111, 46, 0.09);
  --p9cs-text:        #1a1814;
  --p9cs-text-mid:    #6b6458;
  --p9cs-text-muted:  #a8a090;
  --p9cs-danger:      #b53c3c;
  --p9cs-success:     #2e7d32;
  --p9cs-radius:      4px;
  --p9cs-shadow:      0 1px 3px rgba(26,24,20,.06), 0 1px 2px rgba(26,24,20,.04);
  --p9cs-shadow-md:   0 4px 16px rgba(26,24,20,.08);
  --p9cs-font-head:   'Playfair Display', Georgia, serif;
  --p9cs-font-body:   'Inter', sans-serif;
}

/* ── Wrap ─────────────────────────────────────────────────── */
#p9cs-wrap {
  font-family: var(--p9cs-font-body);
  color: var(--p9cs-text);
  background: var(--p9cs-bg);
  padding: 0 1.5rem 2rem;
  box-sizing: border-box;
}
#p9cs-wrap *, #p9cs-wrap *::before, #p9cs-wrap *::after { box-sizing: border-box; }

/* ── Top bar ──────────────────────────────────────────────── */
#p9cs-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--p9cs-border);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
#p9cs-topbar h2 {
  font-family: var(--p9cs-font-head);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--p9cs-text);
  margin: 0;
  flex: 1;
}
/* #p9cs-deal-name (the "Deal" field) now lives in #p9cs-inputs as a
   normal .p9cs-field, styled by the shared ".p9cs-field input" rule
   further down — no topbar-specific override needed any more. */

/* ── Saved-stacks toolbar ("My Stacks") ───────────────────────
   Mirrors parcel9-parcel-iq's #p9piq-toolbar. ─────────────────*/
.p9cs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 0 1.1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--p9cs-border);
}
.p9cs-toolbar-left  { position: relative; }
.p9cs-toolbar-right { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }

.p9cs-btn--ghost {
  background: transparent;
  color: var(--p9cs-text-mid);
  border: 1px solid var(--p9cs-border-md);
}
.p9cs-btn--ghost:hover { background: var(--p9cs-bg-subtle); color: var(--p9cs-text); border-color: var(--p9cs-gold); }

.p9cs-saved-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.32rem;
  background: var(--p9cs-gold); color: #fff;
  border-radius: 999px; font-size: 0.65rem; font-weight: 700;
  letter-spacing: normal; text-transform: none;
}
.p9cs-saved-count:empty { display: none; }

/* Spins next to "My Stacks" itself while loadSavedList()'s initial request
   is in flight (see capital-stack.js) — visible feedback that the count
   badge/panel aren't just empty yet, without needing to open the panel to
   find out. Hidden the rest of the time (toggled via
   #p9cs-saved-toggle.is-loading), including while the badge/list already
   have real data to show. Reuses the existing p9cs-spin keyframe. */
.p9cs-saved-toggle-spinner {
  display: none;
  width: 10px; height: 10px;
  border: 2px solid var(--p9cs-gold-light);
  border-top-color: var(--p9cs-gold);
  border-radius: 50%;
  animation: p9cs-spin .7s linear infinite;
}
#p9cs-saved-toggle.is-loading .p9cs-saved-toggle-spinner { display: inline-block; }
#p9cs-saved-toggle.is-loading .p9cs-saved-count { display: none; }

.p9cs-saved-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 500;
  width: 320px; max-width: min(90vw, 320px);
  background: var(--p9cs-bg); border: 1px solid var(--p9cs-border-md);
  border-radius: var(--p9cs-radius); box-shadow: var(--p9cs-shadow-md);
  overflow: hidden;
}
.p9cs-saved-panel-head {
  padding: 0.65rem 0.9rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--p9cs-text-muted);
  border-bottom: 1px solid var(--p9cs-border); background: var(--p9cs-bg-warm);
}
.p9cs-saved-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.p9cs-saved-item {
  display: flex; align-items: center; gap: 0.15rem;
  padding: 0 0.4rem; border-bottom: 1px solid var(--p9cs-border);
}
.p9cs-saved-item:last-child { border-bottom: none; }
.p9cs-saved-item.is-current { background: var(--p9cs-gold-light); }
.p9cs-saved-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: none; border: none; padding: 0.6rem 0.4rem; cursor: pointer; text-align: left;
}
.p9cs-saved-open:hover { background: var(--p9cs-gold-light); }
.p9cs-saved-name {
  font-size: 0.82rem; color: var(--p9cs-text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.p9cs-saved-date { font-size: 0.7rem; color: var(--p9cs-text-muted); }
.p9cs-saved-rename, .p9cs-saved-del {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0.4rem; cursor: pointer;
  color: var(--p9cs-text-muted); border-radius: 3px; transition: background 0.15s, color 0.15s;
}
.p9cs-saved-rename:hover { color: var(--p9cs-gold); background: var(--p9cs-gold-light); }
.p9cs-saved-del:hover    { color: var(--p9cs-danger); background: rgba(181,60,60,.08); }
.p9cs-saved-empty { padding: 1.5rem 0.9rem; text-align: center; font-size: 0.8rem; color: var(--p9cs-text-muted); }

.p9cs-saved-loading {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.2rem 0.9rem; font-size: 0.8rem; color: var(--p9cs-text-muted); text-align: center;
}
.p9cs-saved-loading-spinner {
  flex-shrink: 0; width: 12px; height: 12px;
  border: 2px solid var(--p9cs-gold-light);
  border-top-color: var(--p9cs-gold);
  border-radius: 50%;
  animation: p9cs-spin .7s linear infinite;
}

.p9cs-save-msg { font-size: 0.75rem; font-weight: 500; min-height: 1em; }

.p9cs-link-btn {
  background: none; border: none; padding: 0; margin: 0;
  font-family: var(--p9cs-font-body); font-size: 0.75rem; font-weight: 500;
  color: var(--p9cs-gold); text-decoration: underline; cursor: pointer;
}
.p9cs-link-btn:hover { color: var(--p9cs-gold-hover); }

/* ── Main grid ────────────────────────────────────────────── */
/* --p9cs-col-w is set by initColumnResizer() in capital-stack.js (and
   persisted to localStorage) once the user drags .p9cs-col-resizer — the
   middle column below IS that resizer, not a plain grid gap, so dragging
   it visually feels like resizing the gap itself. Mirrors
   parcel9-land-comps' .p9lc-layout / parcel9-parcel-iq's .p9piq-two-col
   exactly (same mechanics). */
#p9cs-main-grid {
  display: grid;
  grid-template-columns: var(--p9cs-col-w, 380px) 20px 1fr;
  column-gap: 6px;
  align-items: start;
}
@media (max-width: 860px) {
  #p9cs-main-grid { grid-template-columns: 1fr; }
  /* !important required: the base .p9cs-col-resizer rule below sets its
     own unconditional 'display: flex' with identical specificity (single
     class selector) and appears later in this file, so without it that
     rule would win the cascade on mobile too. Nothing to resize between
     once the layout collapses to a single column anyway. */
  .p9cs-col-resizer { display: none !important; }
}

/* Draggable divider between the two panels — see initColumnResizer() in
   capital-stack.js. The full grid column is the hit-area (easier to grab
   than a hairline), with a full-height dashed line down the middle and a
   vertical "drag to adjust" label breaking it partway down. Mirrors
   parcel9-land-comps' .p9lc-col-resizer. */
.p9cs-col-resizer {
  align-self: stretch;
  min-height: 100%;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  position: relative;
}
.p9cs-col-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed var(--p9cs-border-md);
  transition: border-color 0.15s ease;
}
.p9cs-col-resizer:hover::before,
.p9cs-col-resizer.is-dragging::before {
  border-color: var(--p9cs-gold);
}
.p9cs-col-resizer-label {
  position: relative;
  z-index: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p9cs-text-muted);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  /* Solid patch in the page's own background color, breaking the dashed
     line cleanly behind the label instead of text sitting on top of it. */
  background: var(--p9cs-bg);
  padding: 10px 1px;
  border-radius: var(--p9cs-radius);
  transition: color 0.15s ease;
}
.p9cs-col-resizer:hover .p9cs-col-resizer-label,
.p9cs-col-resizer.is-dragging .p9cs-col-resizer-label {
  color: var(--p9cs-gold);
}

/* ── Inputs column ────────────────────────────────────────── */
#p9cs-inputs { display: flex; flex-direction: column; gap: 1rem; }

/* ── Section panels ───────────────────────────────────────── */
.p9cs-section {
  background: var(--p9cs-bg);
  border: 1px solid var(--p9cs-border);
  border-radius: var(--p9cs-radius);
  box-shadow: var(--p9cs-shadow);
  overflow: hidden;
}
.p9cs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--p9cs-bg-warm);
  border-bottom: 1px solid var(--p9cs-border);
  cursor: pointer;
  user-select: none;
}
.p9cs-section-title {
  font-family: var(--p9cs-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p9cs-gold);
}
.p9cs-section-toggle {
  background: none;
  border: none;
  color: var(--p9cs-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.15rem 0.35rem;
  line-height: 1;
  border-radius: 2px;
  transition: transform 0.2s, color 0.2s;
}
.p9cs-section-toggle.open { transform: rotate(0deg); }
.p9cs-section-body {
  padding: 1.1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.p9cs-section-body.collapsed { display: none; }

/* ── Fields ───────────────────────────────────────────────── */
.p9cs-field { display: flex; flex-direction: column; gap: 0.3rem; }
.p9cs-field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--p9cs-text-mid);
}
/* Label + "From Pipeline" picker on the same line — mirrors
   parcel9-parcel-iq's .p9piq-section-label-row. */
.p9cs-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.p9cs-field input,
.p9cs-field select {
  background: var(--p9cs-bg-subtle);
  border: 1px solid var(--p9cs-border-md);
  border-radius: var(--p9cs-radius);
  padding: 0.55rem 0.8rem;
  font-family: var(--p9cs-font-body);
  font-size: 0.88rem;
  color: var(--p9cs-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.p9cs-field input:focus,
.p9cs-field select:focus {
  border-color: var(--p9cs-gold);
  box-shadow: 0 0 0 3px rgba(154,111,46,.1);
}
.p9cs-field input::placeholder { color: var(--p9cs-text-muted); }

/* Native <select> ignores the shared input styling above for its own
   built-in dropdown arrow/box chrome — replace it with a custom chevron
   so selects like "Loan Size Method" match text inputs exactly. Mirrors
   parcel9-parcel-iq's select.p9piq-input. */
.p9cs-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B6458' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  cursor: pointer;
}
.p9cs-field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239A6F2E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.p9cs-field select::-ms-expand { display: none; }
.p9cs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.p9cs-hint { font-size: 0.72rem; color: var(--p9cs-text-muted); }

/* Toggle row */
.p9cs-toggle-row { display: flex; align-items: center; gap: 0.5rem; }
.p9cs-toggle-row input[type="checkbox"] { accent-color: var(--p9cs-gold); width: 1rem; height: 1rem; }
.p9cs-toggle-row label { font-size: 0.85rem; color: var(--p9cs-text-mid); cursor: pointer; }

/* ── Buttons ──────────────────────────────────────────────── */
.p9cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--p9cs-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.p9cs-btn--primary   { background: var(--p9cs-gold); color: #fff; border-color: var(--p9cs-gold); }
.p9cs-btn--primary:hover { background: var(--p9cs-gold-hover); border-color: var(--p9cs-gold-hover); }
.p9cs-btn--secondary { background: transparent; color: var(--p9cs-gold); border: 1px solid rgba(154,111,46,.4); }
.p9cs-btn--secondary:hover { background: var(--p9cs-gold-light); border-color: var(--p9cs-gold); }
.p9cs-btn--danger    { background: var(--p9cs-danger); color: #fff; border-color: var(--p9cs-danger); }
.p9cs-btn--danger:hover { background: #8c2e2e; border-color: #8c2e2e; }
.p9cs-btn--sm { font-size: 0.7rem; padding: 0.38rem 0.85rem; }
.p9cs-btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; padding: 0.75rem 0 0.25rem; }
.p9cs-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Outputs column ───────────────────────────────────────── */
#p9cs-outputs { display: flex; flex-direction: column; gap: 1rem; }

/* ── Metric cards ─────────────────────────────────────────── */
#p9cs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.p9cs-card {
  background: var(--p9cs-bg);
  border: 1px solid var(--p9cs-border);
  border-radius: var(--p9cs-radius);
  padding: 0.9rem 1rem;
  box-shadow: var(--p9cs-shadow);
}
.p9cs-card-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p9cs-text-muted);
  margin-bottom: 0.35rem;
}
.p9cs-card-value {
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--p9cs-text);
  line-height: 1.1;
}
.p9cs-card-value.positive { color: var(--p9cs-success); }
.p9cs-card-value.negative { color: var(--p9cs-danger); }

/* ── Panel ────────────────────────────────────────────────── */
.p9cs-panel {
  background: var(--p9cs-bg);
  border: 1px solid var(--p9cs-border);
  border-radius: var(--p9cs-radius);
  box-shadow: var(--p9cs-shadow);
  padding: 1.25rem 1.35rem 1.35rem;
}
/* Hidden until applyForm() runs at least once (see #p9cs-apply-prompt /
   render() in capital-stack.js) — otherwise these panels' own "Enter
   costs to see the summary" empty states would sit redundantly below
   the apply-prompt card on first load. render()'s existing gating logic
   re-hides them again for a guest with results to protect, in favor of
   #p9cs-results-gate. */
#p9cs-outputs .p9cs-panel { display: none; }
/* ...EXCEPT the fake .p9cs-panel divs inside .p9cs-teaser-blur (see
   capital-stack.php) — those are decorative and must always render so
   the blur has something to show; only their ancestor .p9cs-teaser-wrap
   (#p9cs-results-gate) is what render() actually shows/hides. Needs
   #p9cs-outputs in the selector to out-specificity the ID-qualified rule
   above (a plain ".p9cs-teaser-blur .p9cs-panel" loses to it). Without
   this, every fake panel collapses to display:none, which collapses
   .p9cs-teaser-blur to zero height, which — combined with
   .p9cs-teaser-wrap's overflow:hidden — clips the absolutely-positioned
   .p9cs-teaser-cta on top of it down to zero height too: the entire gate
   disappears, not just the blurred backdrop. */
#p9cs-outputs .p9cs-teaser-blur .p9cs-panel { display: block; }
.p9cs-panel-title {
  font-family: var(--p9cs-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p9cs-gold);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--p9cs-border);
}
.p9cs-empty {
  color: var(--p9cs-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem 0;
}

/* ── Capital stack bar ────────────────────────────────────── */
#p9cs-stack-bar { height: 20px; display: flex; border-radius: 3px; overflow: hidden; margin-bottom: 0.75rem; }
#p9cs-stack-bar .p9cs-bar-seg { height: 100%; transition: width 0.3s ease; }
.p9cs-bar-senior  { background: #1a1814; }
.p9cs-bar-mezz    { background: #6b6458; }
.p9cs-bar-pref    { background: #a8a090; }
.p9cs-bar-equity  { background: var(--p9cs-gold); }

/* ── Stack table ──────────────────────────────────────────── */
.p9cs-stack-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.p9cs-stack-table th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p9cs-text-muted);
  padding: 0.4rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--p9cs-border);
}
.p9cs-stack-table td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--p9cs-border); color: var(--p9cs-text); }
.p9cs-stack-table tr:last-child td { border-bottom: none; font-weight: 600; background: var(--p9cs-bg-warm); }
.p9cs-stack-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ── Waterfall preview ────────────────────────────────────── */
.p9cs-wf-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.4rem 0; border-bottom: 1px solid var(--p9cs-border); }
.p9cs-wf-row:last-child { border-bottom: none; font-weight: 600; }
.p9cs-wf-label { color: var(--p9cs-text-mid); }
.p9cs-wf-val { color: var(--p9cs-text); font-variant-numeric: tabular-nums; }

/* ── HUD panel ────────────────────────────────────────────── */
.p9cs-hud-pass { color: var(--p9cs-success); font-weight: 600; font-size: 0.85rem; }
.p9cs-hud-fail { color: var(--p9cs-danger); font-weight: 600; font-size: 0.85rem; }
.p9cs-hud-row  { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 0.35rem 0; border-bottom: 1px solid var(--p9cs-border); }
.p9cs-hud-row:last-child { border-bottom: none; }

/* ── DSCR / LTV meters ────────────────────────────────────── */
.p9cs-meter-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--p9cs-text-muted); margin-bottom: 0.25rem; }
.p9cs-meter-track { height: 8px; background: var(--p9cs-bg-subtle); border-radius: 4px; overflow: hidden; margin-bottom: 0.25rem; }
.p9cs-meter-fill  { height: 100%; background: var(--p9cs-gold); border-radius: 4px; transition: width 0.3s ease; }
.p9cs-meter-fill.ok   { background: #2e7d32; }
.p9cs-meter-fill.warn { background: #b45309; }
.p9cs-meter-fill.bad  { background: var(--p9cs-danger); }
.p9cs-meter-val   { font-size: 0.82rem; color: var(--p9cs-text-mid); text-align: right; }

/* ── Notice / toast ───────────────────────────────────────── */
#p9cs-notice {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--p9cs-text); color: #fff;
  padding: 0.7rem 1.2rem; border-radius: 3px;
  font-size: 0.85rem; box-shadow: var(--p9cs-shadow-md);
  display: none; z-index: 9999;
}

/* ── Scenario selector ────────────────────────────────────── */
.p9cs-scenario-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--p9cs-border); margin-bottom: 1rem; }
.p9cs-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 0.5rem 1rem;
  font-family: var(--p9cs-font-body); font-size: 0.78rem;
  font-weight: 500; letter-spacing: 0.04em;
  color: var(--p9cs-text-muted); cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.p9cs-tab.active { color: var(--p9cs-gold); border-bottom-color: var(--p9cs-gold); }
.p9cs-tab:hover  { color: var(--p9cs-text); }

/* ═══════════════════════════════════════════════════════════
   PATCH — Missing classes (JS-rendered + view-specific)
════════════════════════════════════════════════════════════ */

/* Panel h3 headings (raw tags inside .p9cs-panel) */
.p9cs-panel h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p9cs-gold);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--p9cs-border);
  font-family: var(--p9cs-font-body);
}

/* Sub-body (hidden expandable sections) */
.p9cs-sub-body { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.5rem; }
.p9cs-hint { font-size: 0.72rem; color: var(--p9cs-text-muted); margin: 0; line-height: 1.4; }

/* Tables */
.p9cs-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 0.5rem; }
.p9cs-table th {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--p9cs-text-muted); padding: 0.35rem 0.5rem; text-align: left;
  border-bottom: 1px solid var(--p9cs-border);
}
.p9cs-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--p9cs-border); color: var(--p9cs-text); }
.p9cs-table tr.p9cs-total td { font-weight: 600; background: var(--p9cs-bg-warm); border-bottom: none; }
.p9cs-table td:not(:first-child), .p9cs-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.p9cs-table--compact td { padding: 0.28rem 0.5rem; }

/* Badges */
.p9cs-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 2px; }
.p9cs-badge--pass { background: rgba(46,125,50,.12); color: #1a4a2e; }
.p9cs-badge--fail { background: rgba(181,60,60,.12); color: #6b1a1a; }

/* Value states */
.p9cs-val--good { color: var(--p9cs-success) !important; font-weight: 600; }
.p9cs-val--warn { color: #b45309 !important; font-weight: 600; }
.p9cs-val--bad  { color: var(--p9cs-danger)  !important; font-weight: 600; }

/* Gap note */
.p9cs-gap-note { font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.65rem; border-radius: 3px; margin-top: 0.5rem; }
.p9cs-val--bad.p9cs-gap-note  { background: rgba(181,60,60,.08); }
.p9cs-val--warn.p9cs-gap-note { background: rgba(180,83,9,.08); }

/* Capital stack bar */
.p9cs-bar-wrap { height: 22px; display: flex; border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; background: var(--p9cs-bg-subtle); }
.p9cs-bar-segment { height: 100%; transition: width 0.3s ease; }
.p9cs-bar-legend { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; }
.p9cs-legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.73rem; color: var(--p9cs-text-mid); }
.p9cs-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.p9cs-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }

/* Waterfall scenarios grid */
.p9cs-waterfall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .p9cs-waterfall-grid { grid-template-columns: 1fr; } }
.p9cs-scenario-header { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--p9cs-gold); margin-bottom: 0.75rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--p9cs-border); }
.p9cs-em-row { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.78rem; padding-top: 0.5rem; border-top: 1px solid var(--p9cs-border); flex-wrap: wrap; }
.p9cs-em-row span { color: var(--p9cs-text-mid); }
.p9cs-em-row em { font-style: normal; font-size: 0.7rem; color: var(--p9cs-text-muted); margin-left: 0.2rem; }
.p9cs-irr-row { margin-top: 0.35rem; padding-top: 0.35rem; }

/* HUD verdict */
.p9cs-hud-verdict { margin-top: 0.85rem; padding: 0.65rem 0.9rem; border-radius: 3px; font-size: 0.83rem; line-height: 1.5; }
.p9cs-hud--yes { background: rgba(46,125,50,.1); color: #1a4a2e; border: 1px solid rgba(46,125,50,.2); }
.p9cs-hud--no  { background: rgba(181,60,60,.08); color: #6b1a1a; border: 1px solid rgba(181,60,60,.2); }
.p9cs-hud-note { font-size: 0.73rem; color: var(--p9cs-text-muted); margin-top: 0.5rem; line-height: 1.4; }

/* Notice states */
#p9cs-notice.p9cs-notice--success { background: #1a4a2e; }
#p9cs-notice.p9cs-notice--error   { background: var(--p9cs-danger); }

/* Panel title class (used on h3 inside .p9cs-panel) */
h3.p9cs-panel-title {
  font-family: var(--p9cs-font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--p9cs-gold) !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px solid var(--p9cs-border) !important;
}

/* Section toggle open state */
.p9cs-section-toggle { cursor: pointer; }
.p9cs-section-toggle.p9cs-open { color: var(--p9cs-gold); }

/* ── "From Pipeline" deal picker (under the Capital Stack Assistant chat)
   Mirrors parcel9-parcel-iq's .p9piq-pipeline-* pattern. ───────────────*/
.p9cs-pipeline-row {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.p9cs-pipeline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--p9cs-gold);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 3px;
  white-space: nowrap;
}
.p9cs-pipeline-btn:hover { text-decoration: underline; }

.p9cs-pipeline-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 300px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--p9cs-bg);
  border: 1px solid var(--p9cs-border-md);
  border-radius: var(--p9cs-radius);
  box-shadow: var(--p9cs-shadow-md);
  z-index: 40;
}
.p9cs-pipeline-panel-head {
  padding: 8px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p9cs-text-muted);
  border-bottom: 1px solid var(--p9cs-border);
}
.p9cs-pipeline-list { list-style: none; margin: 0; padding: 0; }
.p9cs-pipeline-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--p9cs-border);
  padding: 8px 12px;
  cursor: pointer;
}
.p9cs-pipeline-item:last-child { border-bottom: none; }
.p9cs-pipeline-item:hover { background: var(--p9cs-gold-light); }
.p9cs-pipeline-item-addr {
  display: block;
  font-size: 0.78rem;
  color: var(--p9cs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p9cs-pipeline-item-stage {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.65rem;
  color: var(--p9cs-text-muted);
}
.p9cs-pipeline-empty {
  padding: 16px 12px;
  font-size: 0.75rem;
  color: var(--p9cs-text-muted);
  text-align: center;
}
@media (max-width: 480px) { .p9cs-pipeline-panel { width: 100%; } }

/* =========================================================
   PIPELINE DEAL PICKER  — shared cross-plugin styling
   ========================================================= */
.p9-deal-picker {
    display: block;
    width: 100%;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.82rem;
    color: var(--text, #2e2b26);
    background: #fff;
    border: 1px solid var(--border, rgba(154,111,46,0.25));
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.p9-deal-picker:focus {
    outline: none;
    border-color: var(--accent, #9a6f2e);
    box-shadow: 0 0 0 2px rgba(154,111,46,0.15);
}

/* =============================================================
   AI FEATURES  — light theme, matches existing capital-stack vars
   ============================================================= */

/* AI topbar separator + buttons */
.p9cs-ai-divider {
    width: 1px;
    height: 22px;
    background: var(--p9cs-border-md);
    margin: 0 6px;
    align-self: center;
    flex-shrink: 0;
}
.p9cs-btn--ai {
    background: transparent;
    color: var(--p9cs-gold);
    border: 1px solid var(--p9cs-border-md);
    padding: 5px 13px;
    border-radius: var(--p9cs-radius);
    font-family: var(--p9cs-font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.p9cs-btn--ai:hover {
    background: var(--p9cs-gold);
    border-color: var(--p9cs-gold);
    color: #fff;
}

/* AI output panel — full-width strip below the topbar */
#p9cs-ai-panel {
    background: var(--p9cs-bg);
    border: 1px solid var(--p9cs-border-md);
    border-radius: var(--p9cs-radius);
    margin: 0 0 1rem;
    overflow: hidden;
    box-shadow: var(--p9cs-shadow);
}
#p9cs-ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid var(--p9cs-border);
    background: var(--p9cs-bg-warm);
}
#p9cs-ai-panel-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--p9cs-gold);
}
#p9cs-ai-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--p9cs-text-muted);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
}
#p9cs-ai-panel-close:hover { color: var(--p9cs-text); }

#p9cs-ai-panel-body {
    padding: 1rem 1.1rem;
    max-height: 440px;
    overflow-y: auto;
}
#p9cs-ai-panel-footer {
    padding: 0.6rem 1.1rem;
    border-top: 1px solid var(--p9cs-border);
    background: var(--p9cs-bg-subtle);
    text-align: right;
}

/* Spinner */
#p9cs-ai-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--p9cs-text-mid);
    font-size: .85rem;
    padding: 6px 0;
}
.p9cs-ai-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid var(--p9cs-border-md);
    border-top-color: var(--p9cs-gold);
    border-radius: 50%;
    animation: p9cs-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes p9cs-spin { to { transform: rotate(360deg); } }

/* Error */
.p9cs-ai-error {
    color: var(--p9cs-danger);
    font-size: .85rem;
    margin: 0;
}

/* LP Memo paragraphs */
.p9cs-ai-memo p {
    font-size: .88rem;
    line-height: 1.75;
    color: var(--p9cs-text);
    margin: 0 0 1em;
}
.p9cs-ai-memo p:last-child { margin: 0; }

/* Verdict's "also posted to chat" pointer */
.p9cs-ai-note {
    font-size: .78rem;
    color: var(--p9cs-text-muted);
    font-style: italic;
    margin: .75em 0 0;
    padding-top: .75em;
    border-top: 1px dashed var(--p9cs-border);
}

/* Summary line (Rate Check + Benchmark) */
.p9cs-ai-summary {
    font-size: .82rem;
    color: var(--p9cs-text-mid);
    margin: 0 0 12px;
    font-style: italic;
}

/* Check rows (Rate Check + Benchmark) */
.p9cs-ai-checks { display: flex; flex-direction: column; gap: 8px; }
.p9cs-ai-check-row {
    display: grid;
    grid-template-columns: 130px auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 9px 11px;
    background: var(--p9cs-bg-subtle);
    border: 1px solid var(--p9cs-border);
    border-radius: var(--p9cs-radius);
}
.p9cs-ai-check-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--p9cs-text);
    padding-top: 2px;
}
.p9cs-ai-check-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 2px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    text-transform: uppercase;
    margin-top: 1px;
}
.p9cs-ai-badge--neutral { background: rgba(107,100,88,.1);  color: var(--p9cs-text-mid); }
.p9cs-ai-badge--ok      { background: rgba(46,125,50,.12);  color: #1a4a2e; }
.p9cs-ai-badge--warn    { background: rgba(180,83,9,.12);   color: #7a3800; }
.p9cs-ai-badge--danger  { background: rgba(181,60,60,.12);  color: #6b1a1a; }
.p9cs-ai-check-detail {
    font-size: .8rem;
    color: var(--p9cs-text-mid);
    line-height: 1.5;
}

/* Optimizer cards grid */
.p9cs-ai-opt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 860px) { .p9cs-ai-opt-grid { grid-template-columns: 1fr; } }

.p9cs-ai-opt-card {
    background: var(--p9cs-bg);
    border: 1px solid var(--p9cs-border);
    border-radius: var(--p9cs-radius);
    padding: 12px;
}
.p9cs-ai-opt-card--rec {
    border-color: var(--p9cs-gold);
    background: var(--p9cs-gold-light);
}
.p9cs-ai-opt-card-title {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--p9cs-gold);
    margin-bottom: 9px;
}
.p9cs-ai-opt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid var(--p9cs-border);
    font-size: .78rem;
}
.p9cs-ai-opt-row:last-of-type { border-bottom: none; }
.p9cs-ai-opt-row span   { color: var(--p9cs-text-mid); }
.p9cs-ai-opt-row strong { color: var(--p9cs-text); font-weight: 600; }
.p9cs-ai-opt-rationale {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--p9cs-text-mid);
    line-height: 1.55;
    font-style: italic;
}

/* Optimizer modal — matches existing #p9cs-modal style */
#p9cs-optimize-modal {
    position: fixed;
    inset: 0;
    background: rgba(26,24,20,.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#p9cs-optimize-modal-inner {
    background: var(--p9cs-bg);
    border: 1px solid var(--p9cs-border-md);
    border-radius: var(--p9cs-radius);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--p9cs-shadow-md);
    overflow: hidden;
}
/* Shared modal header (class used by optimizer, ID used by Load modal) */
.p9cs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--p9cs-border);
    background: var(--p9cs-bg-warm);
}
.p9cs-modal-header h3 {
    margin: 0;
    font-family: var(--p9cs-font-head);
    font-size: 1rem;
    font-weight: 400;
    color: var(--p9cs-text);
}
.p9cs-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--p9cs-text-muted);
    line-height: 1;
    padding: 0;
}

/* =============================================================
   CAPITAL STACK ASSISTANT — guided intake + what-if chat
   Mirrors parcl9-proforma's Parcl9 Assistant / parcel9-parcel-iq's
   Parcel IQ Assistant: warm-gold-pale box, white message bubbles/input
   popping against it, floating/draggable window once the first message
   is sent.
   ============================================================= */
.p9cs-intake-box {
  background: var(--p9cs-bg-warm);
  border: 1px solid var(--p9cs-border-md);
  border-radius: var(--p9cs-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.p9cs-intake-box--highlight {
  border-color: var(--p9cs-gold);
  box-shadow: 0 0 0 3px var(--p9cs-gold-light), var(--p9cs-shadow-md);
}

.p9cs-intake-box--floating {
  position: fixed;
  top: 24px;
  left: 24px;
  bottom: auto;
  right: auto;
  width: 380px;
  min-width: 300px;
  max-width: calc(100vw - 24px);
  height: min(70vh, 560px);
  min-height: 320px;
  max-height: calc(100vh - 24px);
  z-index: 9999;
  background: var(--p9cs-bg);
  box-shadow: var(--p9cs-shadow-md);
  border-color: var(--p9cs-gold);
  margin-bottom: 0;
}
.p9cs-intake-box--floating .p9cs-intake-thread { flex: 1; height: auto; max-height: none; }

/* Edge/corner resize handles for the floating chat window — inert and
   hidden while docked. Positioned just inside the box's own edges (not
   straddling them) so .p9cs-intake-box's overflow:hidden (needed for its
   rounded corners) doesn't clip them. Corners sit above edges (higher
   z-index) since they overlap the same space at the box's 4 corners.
   Driven by initFloatingResize() in capital-stack.js — mirrors
   parcel9-parcel-iq's .p9piq-resize-handle / parcel9-land-comps'
   .p9lc-resize-handle almost exactly. */
.p9cs-resize-handle { display: none; position: absolute; z-index: 30; }
.p9cs-intake-box--floating .p9cs-resize-handle { display: block; }

.p9cs-resize-handle--n, .p9cs-resize-handle--s {
  left: 12px; right: 12px; height: 7px; cursor: ns-resize;
}
.p9cs-resize-handle--n { top: 0; }
.p9cs-resize-handle--s { bottom: 0; }

.p9cs-resize-handle--e, .p9cs-resize-handle--w {
  top: 12px; bottom: 12px; width: 7px; cursor: ew-resize;
}
.p9cs-resize-handle--e { right: 0; }
.p9cs-resize-handle--w { left: 0; }

.p9cs-resize-handle--ne, .p9cs-resize-handle--nw,
.p9cs-resize-handle--se, .p9cs-resize-handle--sw {
  width: 16px; height: 16px; z-index: 31;
}
.p9cs-resize-handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.p9cs-resize-handle--nw { top: 0; left: 0;  cursor: nwse-resize; }
.p9cs-resize-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }
.p9cs-resize-handle--sw { bottom: 0; left: 0;  cursor: nesw-resize; }

/* Decorative echo of the docked chat's own resize cue, kept in the one
   corner users most expect it — purely visual, doesn't affect the actual
   hit-area (that's the full 16x16 handle underneath). */
.p9cs-resize-handle--se::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(
    135deg,
    var(--p9cs-gold) 0px, var(--p9cs-gold) 2px,
    transparent 2px, transparent 5px
  );
  opacity: .5;
}

.p9cs-intake-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 1rem 1rem 0;
}
.p9cs-intake-box--floating .p9cs-intake-header {
  cursor: move;
  user-select: none;
  padding-bottom: .6rem;
}
.p9cs-intake-header > svg { flex-shrink: 0; margin-top: 3px; color: var(--p9cs-gold); }

#p9cs-intake-title {
  flex: 0 1 130px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--p9cs-gold);
}
.p9cs-intake-subtitle {
  flex: 1 1 120px;
  min-width: 90px;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--p9cs-text-mid);
}
.p9cs-intake-header-btn {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--p9cs-gold);
  padding: 2px;
  display: flex;
  opacity: .7;
  transition: opacity 0.2s;
}
.p9cs-intake-header-btn:hover { opacity: 1; }

@media (max-width: 768px) {
  #p9cs-intake-popout-btn { display: none !important; }
}

.p9cs-intake-thread {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .9rem 1rem;
  height: 240px;
  min-height: 140px;
  max-height: 70vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.p9cs-intake-thread::-webkit-scrollbar { width: 4px; }
.p9cs-intake-thread::-webkit-scrollbar-track { background: transparent; }
.p9cs-intake-thread::-webkit-scrollbar-thumb { background: var(--p9cs-border-md); border-radius: 2px; }

/* Dedicated horizontal resize bar, docked mode only — sits between the
   thread and the input row so drags never land on the thread's own
   scrollbar. See initThreadResize() in capital-stack.js. Mirrors
   parcel9-land-comps' .p9lc-chat-resize-bar. */
.p9cs-intake-resize-bar {
  flex-shrink: 0;
  height: 10px;
  margin: -5px 0;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 5;
  touch-action: none;
}
.p9cs-intake-resize-bar::before {
  content: '';
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--p9cs-border-md);
  transition: background 0.15s ease, width 0.15s ease;
}
.p9cs-intake-resize-bar::after {
  content: 'drag';
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p9cs-text-muted);
  opacity: 0.8;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.p9cs-intake-resize-bar:hover::before,
.p9cs-intake-resize-bar.is-dragging::before {
  background: var(--p9cs-gold);
  width: 48px;
}
.p9cs-intake-resize-bar:hover::after,
.p9cs-intake-resize-bar.is-dragging::after {
  color: var(--p9cs-gold);
  opacity: 1;
}
.p9cs-intake-box--floating .p9cs-intake-resize-bar { display: none; }

.p9cs-intake-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; }
.p9cs-intake-msg--user { flex-direction: row-reverse; align-self: flex-end; }

.p9cs-intake-avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--p9cs-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 1px;
}

.p9cs-intake-bubble {
  padding: .65rem .8rem;
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--p9cs-text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.p9cs-intake-msg--assistant .p9cs-intake-bubble {
  background: var(--p9cs-bg);
  box-shadow: var(--p9cs-shadow);
  border-top-left-radius: 3px;
}
.p9cs-intake-msg--user .p9cs-intake-bubble {
  background: rgba(154,111,46,.18);
  border: 1px solid var(--p9cs-border-md);
  border-top-right-radius: 3px;
  color: var(--p9cs-text);
}
/* "Load from Pipeline" button result — plain informational note, not a
   chat turn, so it's dimmer and full-width with no avatar. */
.p9cs-intake-msg--system { max-width: 100%; }
.p9cs-intake-msg--system .p9cs-intake-bubble {
  background: transparent;
  border: 1px dashed var(--p9cs-border-md);
  color: var(--p9cs-text-muted);
  font-size: .78rem;
  width: 100%;
}

.p9cs-intake-typing-dots { display: flex; align-items: center; gap: 5px; padding: .7rem .85rem; min-width: 46px; }
.p9cs-intake-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--p9cs-gold);
  border-radius: 50%;
  animation: p9csTypingDot 1.2s infinite;
}
.p9cs-intake-typing-dots span:nth-child(2) { animation-delay: .2s; }
.p9cs-intake-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes p9csTypingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%            { opacity: 1;  transform: translateY(-3px); }
}

.p9cs-intake-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 1rem .9rem;
}
.p9cs-intake-input {
  flex: 1;
  background: var(--p9cs-bg);
  border: 1px solid var(--p9cs-border-md);
  border-radius: 10px;
  padding: .75rem .9rem;
  font-size: .84rem;
  font-family: var(--p9cs-font-body);
  color: var(--p9cs-text);
  outline: none;
  resize: none;
  line-height: 1.5;
  /* auto, not hidden — the auto-grow handler in capital-stack.js caps
     this.style.height at max-height below (120px), so once the message
     is longer than that the extra content has nowhere to go but a
     scrollbar. `hidden` clipped it with no way to reach the rest of what
     you'd typed; `auto` only shows a scrollbar once content actually
     overflows, so short messages still look exactly the same. */
  overflow-y: auto;
  min-height: 52px;
  max-height: 120px;
  transition: border-color 0.2s;
}
.p9cs-intake-input:focus { border-color: var(--p9cs-gold); box-shadow: 0 0 0 3px rgba(154,111,46,.1); }
.p9cs-intake-input::placeholder { color: var(--p9cs-text-muted); font-size: .78rem; line-height: 1.4; }

.p9cs-intake-send-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--p9cs-gold);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.p9cs-intake-send-btn:hover  { opacity: .85; }
.p9cs-intake-send-btn:active { opacity: .7; }

.p9cs-intake-skip { padding: 0 1rem 1rem; font-size: .78rem; color: var(--p9cs-text-muted); }

.p9cs-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--p9cs-gold);
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.p9cs-source-chip {
  margin-top: .4rem;
  font-size: .65rem;
  color: var(--p9cs-text-muted);
  font-style: italic;
}
.p9cs-apply-scenario {
  display: block;
  margin-top: .5rem;
  padding: .35rem .7rem;
  background: transparent;
  border: 1px solid var(--p9cs-border-md);
  border-radius: 2px;
  color: var(--p9cs-gold);
  font-size: .68rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.p9cs-apply-scenario:hover { border-color: var(--p9cs-gold); color: var(--p9cs-gold-hover); }
.p9cs-apply-scenario.is-applied { color: var(--p9cs-success); border-color: var(--p9cs-success); cursor: default; }

/* ── Utility ──────────────────────────────────────────────── */
.p9cs-hidden { display: none !important; }

/* ── "Start Now" gate (guest bot-check) ──────────────────────
   Overlays #p9cs-intake-box (chat + its "fill in manually below" skip
   link) until a guest clears it, see initStartGate() in
   capital-stack.js — a compact, bounded-height card rather than one
   spanning the whole (very tall, multi-section) input column. The raw
   manual-entry fields further down the column are separately disabled
   by applyStartGateState() rather than visually covered. Mirrors
   parcel9-parcel-iq's .p9piq-start-gate / parcel9-land-comps'
   .p9lc-start-gate almost exactly. */
.p9cs-intake-box.p9cs-start-gated { position: relative; min-height: 220px; }
.p9cs-intake-box.p9cs-start-gated.p9cs-gate-active { min-height: 340px; }

/* Guests keep .p9cs-start-gated on the intake box for its whole page life
   (it's never removed after Start Now clears — only the overlay inside it
   hides, see hideStartGate() in capital-stack.js). Popping that box out
   into the floating window (openFloatingChat()) adds
   .p9cs-intake-box--floating, which needs position:fixed — but that's a
   single-class selector while .p9cs-intake-box.p9cs-start-gated above is
   a two-class compound selector, so the latter's position:relative always
   wins regardless of source order. That silently demoted the floating box
   back to position:relative for every guest, dropping it into normal flow
   at the bottom of #p9cs-wrap ("jumps to the bottom-left") instead of
   pinning it near the viewport corner. This three-class compound selector
   outranks both, so it wins unconditionally. Mirrors parcel9-land-comps'
   identical .p9lc-start-gated.p9lc-chat-box--floating fix. */
.p9cs-intake-box.p9cs-start-gated.p9cs-intake-box--floating { position: fixed; min-height: 0; }

.p9cs-start-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem 1.25rem;
  background: var(--p9cs-bg);
  border-radius: var(--p9cs-radius);
  font-family: var(--p9cs-font-body);
  overflow-y: auto;
}
/* Fields disabled by applyStartGateState() while a guest hasn't cleared
   the gate yet — reinforces visually that they're not usable yet. */
#p9cs-inputs .p9cs-field input:disabled,
#p9cs-inputs .p9cs-field select:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--p9cs-bg-subtle);
}
.p9cs-gate-eyebrow {
  margin: 0 0 .3rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--p9cs-gold);
}
.p9cs-gate-title {
  margin: 0 0 .5rem;
  font-family: var(--p9cs-font-head);
  font-size: 1.2rem;
  color: var(--p9cs-text);
}
.p9cs-gate-body {
  margin: 0 0 1rem;
  max-width: 320px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--p9cs-text-mid);
}
#p9cs-turnstile-widget { margin-bottom: .5rem; }
.p9cs-start-gate-status {
  min-height: 1.2em;
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--p9cs-text-muted);
}

/* ── Guest results gate ───────────────────────────────────────
   Shown by render() in capital-stack.js in place of the .p9cs-panel
   divs, once a guest has entered enough to have real results worth
   protecting — see hasResultsToProtect(). First child of #p9cs-outputs,
   so it's the first thing in view.

   .p9cs-teaser-blur below is FIXED, made-up placeholder markup (see the
   long comment in capital-stack.php) — never the guest's real computed
   numbers — so blurring it is purely decorative, safe to strip via
   devtools, and exists only to make the report read as "real and
   substantial" at a glance. Mirrors parcel9-parcel-iq's
   .p9piq-teaser-wrap/.p9piq-teaser-blur exactly. */
.p9cs-teaser-wrap { position: relative; overflow: hidden; border-radius: var(--p9cs-radius); }
.p9cs-teaser-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
.p9cs-teaser-blur .p9cs-panel:first-child { margin-top: 0; }

/* Floats on top of the blurred placeholder report instead of replacing
   it — translucent gradient (not solid) so the blur underneath still
   reads as "there's a real report here", and pinned near the top rather
   than vertically centered, since the blurred content behind it can run
   much taller than the viewport (see the earlier off-screen-CTA fix). */
.p9cs-teaser-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 45%, rgba(255,255,255,0) 100%);
}
.p9cs-teaser-cta-inner {
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding: 1.75rem 1.5rem;
  /* Near-opaque, not fully — keeps the card's own text legible while a
     hint of the blurred report still shows through at its edges. */
  background: rgba(255,255,255,.96);
  border: 1px solid var(--p9cs-border-md);
  border-radius: var(--p9cs-radius);
  box-shadow: var(--p9cs-shadow-md);
}
.p9cs-teaser-cta-inner .p9cs-gate-body { max-width: 340px; margin: 0 auto .9rem; }
.p9cs-teaser-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.p9cs-teaser-cta-actions .p9cs-btn--primary {
  width: 100%;
  max-width: 260px;
  text-align: center;
  text-decoration: none;
}
/* Explicit + !important as a belt-and-suspenders guard: this is the one
   button in the plugin that most needs to read clearly at a glance, so
   don't leave its contrast to inheritance from .p9cs-btn--primary alone
   — some host themes apply their own <a> color rules that can otherwise
   win out. Mirrors parcel9-parcel-iq's .p9piq-gate-cta exactly. */
.p9cs-gate-cta {
  color: #fff !important;
  font-weight: 600;
}
.p9cs-teaser-cta-login {
  font-size: .78rem;
  color: var(--p9cs-text-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p9cs-teaser-cta-login:hover { color: var(--p9cs-gold); }

/* ── "Apply Form" prompt ──────────────────────────────────────
   First child of #p9cs-outputs, shown for every visitor (guest or not)
   until applyForm() runs — see the long comment on #p9cs-apply-prompt in
   capital-stack.php. Same flat-card treatment .p9cs-teaser-cta-inner
   uses, just standalone (no blurred backdrop needed here — there's
   nothing to tease yet at this stage). */
.p9cs-apply-prompt {
  padding: 1.75rem 1.5rem;
  background: var(--p9cs-bg);
  border: 1px solid var(--p9cs-border-md);
  border-radius: var(--p9cs-radius);
  box-shadow: var(--p9cs-shadow);
  text-align: center;
}
.p9cs-apply-prompt .p9cs-gate-body { max-width: 420px; margin: 0 auto 1rem; }
.p9cs-apply-prompt .p9cs-btn--primary { min-width: 200px; }

/* ── Chat footer (Apply Form CTA) ─────────────────────────────
   Sits below the "fill in manually below" skip link, its own button
   wired to the same applyForm() as #p9cs-outputs-apply-btn above — lets
   a guest/user apply the form without scrolling away from the chat.
   Mirrors parcel9-parcel-iq's #p9piq-intake-footer. */
.p9cs-intake-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 0 1rem 1rem;
}
.p9cs-intake-footer .p9cs-btn { width: 100%; }
.p9cs-intake-apply-note {
  margin: 0;
  font-size: .74rem;
  color: var(--p9cs-text-muted);
  text-align: center;
}