/* Sacred Command Center · outreach module styles. Owned by the outreach module agent. Use the semantic tokens from theme.css only (no hex, no rgba): tests/static.mjs S-a2 fails the build on a literal color.
   No colored side stripes, no status dots in cells: a status is a plain word, lateness or a problem is a crimson mark plus the word (.late, .ob-st--bad),
   the only marks are Live, Gilt and the owner mark. Charts and bars: grey steps, Crimson only on what needs attention. */

/* ── Overview: the page switch, key numbers, the answer, the container grid ─────────────────────────────────────────── */
.ob-overview { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ob-pages { margin: 0; }
.ob-growth, .ob-lead { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding-bottom: var(--s-6); }
.ob-tiles { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-2); }
.ob-tiles .stat { padding: var(--s-2) var(--s-3); min-height: 92px; }
.ob-tiles .stat-v { margin-top: auto; font-size: 2rem; }
.ob-tiles .stat-v.is-none { min-height: 2rem; line-height: 2rem; }
.ob-tiles .stat-meta { display: flex; align-items: center; gap: 4px; min-height: 1.3em; margin-top: 2px; }
.ob-tiles .stat--accent .stat-meta { color: var(--text); font-weight: 600; }
.ob-tiles .stat-meta .i { color: var(--accent-mark); }

.ob-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
@media (max-width: 1099px) { .ob-top { grid-template-columns: minmax(0, 1fr); } }
.ob-answer { min-width: 0; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.ob-answer.is-bad { border-color: var(--line-strong); }
.ob-verdict { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; color: var(--text); }
.ob-verdict .i { color: var(--accent-mark); flex: none; }
.ob-because { margin-top: var(--s-2); color: var(--text-2); max-width: var(--measure); }
.ob-because .skel { height: 14px; }
.ob-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); color: var(--text-2); }
.ob-asof { margin-top: var(--s-2); }
.ob-stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-2); background: var(--surface-2); border-radius: var(--r-button); color: var(--text); font-size: var(--fs-caption); font-weight: 600; }
.ob-stale .i { color: var(--accent-mark); flex: none; }
.ctr-in > .ob-stale, .ctr-in > div > .ob-stale { margin: var(--s-2) var(--s-3); }
.ob-syn { margin: 0; }
.ob-chip { text-transform: none; }
.ob-chip--bad { background: var(--accent); color: var(--on-accent); }

.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
@media (max-width: 1099px) { .ob-grid { grid-template-columns: minmax(0, 1fr); } }
.ob-cell { min-width: 0; }
.ob-stack { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ob-pad { padding: var(--s-2) var(--s-3); }
.ob-note { margin: 0; }
.ob-clear { margin: 0; padding: var(--s-3); color: var(--text-2); }
.ob-sub { margin: 0; color: var(--text-2); font-size: var(--fs-cell); max-width: 100ch; }
.ob-state-note { margin: 0; color: var(--text-2); font-size: var(--fs-cell); max-width: 110ch; }
.ob-state-note b { color: var(--text); }

/* dense label and value lines (CC v3's statList) */
.ob-lines { display: flex; flex-direction: column; margin: 0; }
.ob-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-height: 40px; padding: var(--s-1) var(--s-3); border-top: 1px solid var(--line); }
.ob-line:first-child { border-top: 0; }
.ob-line dt { color: var(--text-2); font-size: var(--fs-cell); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ob-line dd { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: 0; color: var(--text); font-size: var(--fs-cell); font-weight: 700; text-align: right; }
.ob-line dd.is-bad .i { color: var(--accent-mark); }

/* drafts waiting (Growth) */
.ob-drafts > .ob-draft { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); align-items: flex-start; }
.ob-draft-s { font-weight: 700; color: var(--text); }
.ob-draft-b, .ob-draft-text { width: 100%; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--r-button); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-why { margin: 0; max-width: var(--measure); }
.ob-draft-a { margin-top: var(--s-1); }

.ob-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-who > b { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-who > span { font-size: var(--fs-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-mb { font-weight: 700; color: var(--text); white-space: nowrap; }
.ob-mb > span { font-weight: 400; color: var(--text-3); }
.ob-scroll { max-height: 38vh; overflow: auto; }
.ob-scroll > .table-wrap { border: 0; border-radius: 0; }
.ctr .table-wrap { border: 0; border-radius: 0; }
.ob-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); }

/* a status is a word; one that needs a person carries the crimson mark */
.ob-st { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); color: var(--text); white-space: nowrap; }
.ob-st .i { color: var(--accent-mark); flex: none; }
.ob-st--ok, .ob-st--warn { color: var(--text-2); }

/* ── Replies: the inline cards (Lead system) and the reader ───────────────────────────────────────────────────────── */
.ob-rcards { display: flex; flex-direction: column; }
.ob-rcard + .ob-rcard { border-top: 1px solid var(--line); }
.ob-rh { font: inherit; margin: 0; }
.ob-rhead { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-3); text-align: left; color: var(--text); transition: background-color var(--t-feedback) var(--ease-out); }
@media (hover: hover) { .ob-rhead:hover { background: var(--hover); } }
.ob-rhead:active { background: var(--hover); }
.ob-tw { color: var(--text-3); transition: transform var(--t-move) var(--spring); }
.ob-rcard.is-open .ob-tw { transform: rotate(90deg); }
.ob-rbody { padding: 0 var(--s-3) var(--s-3); border-top: 1px solid var(--line); }
.ob-rec { margin: var(--s-2) 0 0; }

.ob-reader { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding-top: var(--s-2); }
.ob-thread { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0; min-width: 0; }
.ob-msg { display: flex; flex-direction: column; gap: 2px; max-width: min(88%, 44rem); padding: var(--s-2) var(--s-3); border-radius: var(--r-card); white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-msg.in { align-self: flex-start; background: var(--surface-2); }
.ob-msg.out { align-self: flex-end; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ob-msg-b { color: var(--text); }
.ob-msg-m { margin: 0; }
.ob-draft-text { padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); color: var(--text); }
.ob-ta { min-height: 9rem; width: 100%; resize: vertical; }
.ob-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.ob-acts .ob-portal { margin-left: auto; }
.ob-warn { margin: var(--s-1) 0 0; max-width: 70ch; }
.ob-reader .field-err { margin: 0; }

/* ── List pages that carry something above the list (tiles, a view switch): keep the kit's fixed-height page chain intact ─────── */
.ob-prospects, .ob-states, .ob-segments, .ob-packages, .ob-camp { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; min-height: 0; flex: 1; }
.ob-prospects > .lv, .ob-states > .lv, .ob-segments > .lv, .ob-packages > .lv, .ob-camp > .lv, .ob-camp > .ob-segments, .ob-rowsview { flex: 1 1 auto; min-height: 0; }
.ob-prbar { display: flex; align-items: center; gap: var(--s-3); }
.ob-tiles .stat-v.is-none { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; line-height: 2rem; color: var(--text-3); }
.ob-gap { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.ob-gap .i { color: var(--accent-mark); }
.ob-gate { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0 0; color: var(--text-2); }
.ob-gate .i { flex: none; color: var(--text-3); margin-top: 1px; }
.out-card .ob-asof { margin-top: var(--s-2); }

/* The board scrolls inside its own region (the page is a fixed-height list page), so the column heads stay put. Columns are the kit's width. */
.ob-board { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.ob-board > .board { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: var(--s-3); display: flex; align-items: flex-start; gap: var(--s-3); }
.ob-board > .board > .col { flex: 1 0 264px; min-width: 264px; }
.ob-board > .board > .col.is-collapsed { flex: 0 0 132px; min-width: 132px; }
.ob-board > .board-phone { overflow: auto; min-height: 0; }

/* The 52 weeks: a week and its state; every cell is unassigned until the rotation exists */
.ob-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-2); padding: var(--s-1) 0 var(--s-4); overflow: auto; }
.ob-week { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-button); font-size: var(--fs-cell); }
.ob-week .num { font-weight: 700; color: var(--text); }

/* The windowed prospect rows: only the rows on screen are in the page */
.ob-rowsview { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; }
.ob-rows-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ob-search { display: block; min-width: 14rem; flex: 0 1 22rem; }
.ob-win { position: relative; height: min(68dvh, 44rem); min-height: 16rem; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.ob-win-h, .ob-win-r { display: grid; align-items: center; }
.ob-win-h { position: sticky; top: 0; z-index: 2; height: var(--th-h); background: var(--surface); border-bottom: 1px solid var(--line); }
.ob-win-th { padding: 0 var(--cell-px); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.ob-win-sp { position: relative; }
.ob-win-rows { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.ob-win-r { border-top: 1px solid var(--line); }
.ob-win-r:first-child { border-top: 0; }
.ob-win-td { padding: 0 var(--cell-px); font-size: var(--fs-cell); font-weight: var(--cell-w); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-win-more { position: sticky; bottom: 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-caption); }

/* Record pages: the reader's own section, and the empty-grid rule the kit's sections share */
.module--outreach .rs-grid:empty { display: none; }
.module--outreach .rs-honest { padding: var(--s-2) var(--s-1); }
.module--outreach .rp-id { flex: 0 1 17rem; }
.module--outreach .rp-facts { flex: 1 1 26rem; gap: var(--s-2) var(--s-4); }
.view:has(.rp .lv-main) { height: auto; overflow: visible; display: block; padding-bottom: var(--s-6); }
.ob-nc-kv { margin-top: var(--s-3); }

@media (max-width: 719px) {
  .ob-rhead { grid-template-columns: minmax(0, 1fr) 20px; }
  .ob-rhead .ob-st { grid-column: 1; grid-row: 2; }
  .ob-rhead .ob-tw { grid-column: 2; grid-row: 1 / span 2; }
  .ob-msg { max-width: 94%; }
  .ob-acts .ob-portal { margin-left: 0; }
  .ob-win { height: min(62dvh, 36rem); }
  .ob-verdict { font-size: var(--fs-h3); }
}

/* long container summaries (warm-up, campaigns not in draft) wrap to two lines instead of cutting off */
.ob-cell .ctr-sum, .ob-stack .ctr-sum { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ob-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ob-grid--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.ob-col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
@media (max-width: 1099px) { .ob-grid { display: flex; flex-direction: column; } }
@media (max-width: 1099px) { .ob-grid { align-items: stretch; } }

/* rows of portal tenants that are not clients: hidden unless asked for, and the line that says so */
.ob-other { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }

/* a long reason beside Not connected wraps instead of running off the page */
.module--outreach .rs-honest .state, .module--outreach .rl-h .state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); white-space: normal; max-width: 100%; }
.module--outreach .rs-honest .state-why { margin-left: 0; }

/* Phone: the key numbers are one row you swipe (as on Home), and a long line wraps */
@media (max-width: 719px) {
  .ob-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 9.5rem; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
  .ob-tiles > .stat { scroll-snap-align: start; min-height: 84px; }
  .ob-rows-bar .state { white-space: normal; }
}

/* On a record page the reader sits on the page itself (not in a container), so its bubbles and draft are raised surfaces with an edge: Linen on Linen would vanish in Light */
.ob-reader--page .ob-msg.in, .ob-reader--page .ob-draft-text { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }


/* ── P7: customer campaigns, segments, referral report, packages (M12, M19, M23) ──────────────────────────────────────── */
/* the Campaigns pages sit under the page switch; a list keeps the fixed-height chain, a report page scrolls */
.ob-camp > .ob-pages { flex: none; }
.ob-referrals { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding-bottom: var(--s-6); }
.ob-referrals .ob-stack { gap: var(--s-3); }

/* the count that follows every change in the segment builder */
.ob-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); min-width: 0; }
.ob-live-n { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.ob-live-t { font-weight: 700; color: var(--text); }
.ob-live .caption { flex: 1 1 100%; }
.ob-count-note { margin: 0; max-width: var(--measure); }

/* grouped checkboxes and two fields side by side in a sheet */
.ob-fs { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ob-fs > legend { padding: 0; margin-bottom: var(--s-1); }
.ob-opts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.ob-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
@media (max-width: 519px) { .ob-two { grid-template-columns: minmax(0, 1fr); } }

/* the cadence editor: one card per step */
.ob-steps { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.ob-step { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.ob-step-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ob-step-h .eyebrow { margin: 0; }
.ob-step-acts { display: inline-flex; gap: var(--s-1); }
.ob-step .textarea { width: 100%; }
.ob-cad { display: flex; flex-direction: column; min-width: 0; }
.ob-cad-foot { margin: var(--s-2) 0 0; max-width: var(--measure); }

/* "Before it can be turned on": one row per thing that must be true, the word on the right */
.ob-chk { display: flex; flex-direction: column; min-width: 0; }
.ob-chk-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.ob-chk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--s-4); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); min-width: 0; }
.ob-chk-row:first-child { border-top: 0; }
.ob-chk-l { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ob-chk-s { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); color: var(--text-2); white-space: nowrap; text-align: right; }
.ob-chk-row.is-ok .ob-chk-s { color: var(--text); }
.ob-chk-row.is-ok .ob-chk-s .i { color: var(--live, var(--text)); }
.ob-chk-w { grid-column: 1 / -1; margin: 0; max-width: var(--measure); }
.ob-chk-foot { margin: var(--s-2) 0 0; max-width: var(--measure); }
@media (max-width: 519px) { .ob-chk-row { grid-template-columns: minmax(0, 1fr); } .ob-chk-s { text-align: left; } }

/* empty state with templates */
.ob-tpls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.ob-tpls .btn { margin-top: 0; }

/* the parts of the package: a numbered list, not a table */
.ob-parts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ob-part { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); min-width: 0; }
.ob-part:first-child { border-top: 0; }
.ob-part-n { color: var(--text-3); font-weight: 700; padding-top: 1px; }
.ob-part-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text-2); }
.ob-part-b b { color: var(--text); font-weight: 700; }
.ob-part-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); }
.ob-pstate { font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); white-space: nowrap; }
.ob-pstate.is-live { color: var(--text); }
.ob-parts--client { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }

/* Growth's referral scoreboard: the pipeline block under the partner table, and the referral campaigns list */
.ob-refblock { border-top: 1px solid var(--line); padding-bottom: var(--s-2); }
.ob-refblock .eyebrow { margin: var(--s-2) 0 0; }
.ob-reflist { margin: 0; }
.ob-refrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.ob-refrow:first-child { border-top: 0; }

/* the page switch inside Campaigns has four options: on a narrow screen they wrap inside the group instead of running off it */
@media (max-width: 519px) { .ob-camp > .ob-pages .seg { display: flex; flex-wrap: wrap; } }

/* a record page's primary action and its menu wrap rather than run past a 320 px screen */
.module--outreach .rp-acts { flex-wrap: wrap; }