/* Outbound — the Outbound room.
 *
 * Two things this file has to fight, and both were why the room looked unlike
 * the rest of the app:
 *
 *  1. .view (app.css) sets text-align:center, for the rooms that are a single
 *     centred message. A room full of forms is not one of those: inheriting it
 *     put every label above the middle of its own input.
 *  2. paper.css sets section{padding:96px 0} for the marketing pages and
 *     app.css cancels it with `.shell section{padding:0}` — which outranks a
 *     plain .ob-card class, so every card in here rendered with no padding at
 *     all, text flush against its own border. Hence #outboundRoot on the
 *     layout rules: an id, so the cards win.
 *
 * Every colour is a paper.css token, so the room flips with the theme on its
 * own. Colour means place (app.css's "ROOMS" block): Outbound gets a burnt
 * orange, clear of Library's mustard, Map's coral and Chats' magenta.
 */
[data-room="outbound"]{--rc:#C2410C;--rt:#FAE6DA;--ri:#9A3412}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-room="outbound"]{--rc:#F97316;--rt:#2B1509;--ri:#FDBA74}
}
:root[data-theme="dark"] [data-room="outbound"]{--rc:#F97316;--rt:#2B1509;--ri:#FDBA74}

.view.outbound-room{padding:0;margin:0;max-width:none;width:100%;height:100%;
  min-height:0;display:block;align-items:stretch;text-align:left}
#outboundRoot{height:100%;min-height:0;overflow-y:auto;text-align:left}
#outboundRoot .ob-shell{max-width:1000px;margin:0 auto;padding:26px 24px 80px}

/* ── head ──────────────────────────────────────────────────────────────── */
#outboundRoot .ob-head{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start;
  justify-content:space-between;margin:0 0 18px}
#outboundRoot .ob-h1{font-family:var(--display);font-size:26px;line-height:1.15;margin:0;
  color:var(--obsidian);letter-spacing:-.015em}
#outboundRoot .ob-sub{margin:6px 0 0;color:var(--stone);font-size:14px;max-width:60ch;line-height:1.5}
#outboundRoot .ob-headact{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

#outboundRoot .ob-tabs{display:flex;gap:2px;background:var(--sunk);border-radius:var(--radius-pill);
  padding:4px;margin:0 0 22px;overflow-x:auto;scrollbar-width:none;width:fit-content;max-width:100%}
#outboundRoot .ob-tabs::-webkit-scrollbar{display:none}
#outboundRoot .ob-tab{appearance:none;border:0;background:none;font:inherit;font-weight:500;font-size:13.5px;
  padding:7px 15px;border-radius:var(--radius-pill);cursor:pointer;color:var(--stone);
  white-space:nowrap;flex:none;transition:color .12s}
#outboundRoot .ob-tab:hover{color:var(--obsidian)}
#outboundRoot .ob-tab.is-on{background:var(--white);color:var(--obsidian);box-shadow:var(--ring-card)}
#outboundRoot .ob-tab:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#outboundRoot .ob-badge{display:inline-block;min-width:17px;margin-left:6px;padding:0 5px;
  border-radius:var(--radius-pill);background:var(--kept);color:#fff;
  font:600 10.5px/17px var(--sans);text-align:center;vertical-align:1px}

/* ── notes ─────────────────────────────────────────────────────────────── */
#outboundRoot .ob-note{margin:0 0 16px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--white);box-shadow:var(--ring-card);font-size:13.5px;color:var(--charcoal);line-height:1.5}
#outboundRoot .ob-note.is-ok{box-shadow:0 0 0 1px var(--live);color:var(--live)}
#outboundRoot .ob-note.is-bad{box-shadow:0 0 0 1px var(--alarm);color:var(--alarm)}

/* ── cards ─────────────────────────────────────────────────────────────── */
#outboundRoot .ob-card{background:var(--white);border-radius:var(--radius);padding:22px;
  margin:0 0 16px;box-shadow:var(--ring-card)}
#outboundRoot .ob-card h2{font-family:var(--display);font-size:17px;margin:0 0 5px;color:var(--obsidian);letter-spacing:-.01em}
#outboundRoot .ob-card h3{font-size:15px;font-weight:600;margin:0 0 3px;color:var(--obsidian)}
#outboundRoot .ob-lede{margin:0 0 18px;color:var(--stone);font-size:13.5px;max-width:62ch;line-height:1.55}
#outboundRoot .ob-cardhead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  margin:0 0 14px;flex-wrap:wrap}
#outboundRoot .ob-cardhead h2,#outboundRoot .ob-cardhead h3{margin:0}
#outboundRoot .ob-cardhead .ob-lede{margin:5px 0 0}

/* ── forms: label above, both left, every control the same height ──────── */
#outboundRoot .ob-field{display:block;margin:0 0 16px;text-align:left}
#outboundRoot .ob-field > span{display:block;font-size:13px;font-weight:600;color:var(--obsidian);margin:0 0 6px}
#outboundRoot .ob-field > span em{font-style:normal;font-weight:400;color:var(--smoke)}
#outboundRoot .ob-field input,#outboundRoot .ob-field textarea,#outboundRoot .ob-field select{
  display:block;width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;padding:11px 13px;
  border:0;border-radius:var(--radius-sm);background:var(--paper);box-shadow:var(--ring-ghost);
  color:var(--obsidian);min-height:44px}
#outboundRoot .ob-field textarea{resize:vertical;line-height:1.5}
#outboundRoot .ob-field input:focus-visible,#outboundRoot .ob-field textarea:focus-visible,
#outboundRoot .ob-field select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#outboundRoot .ob-field input::placeholder,#outboundRoot .ob-field textarea::placeholder{color:var(--smoke)}
#outboundRoot .ob-hint{display:block;font-style:normal;margin:6px 0 0;font-size:12.5px;color:var(--smoke);line-height:1.5}
#outboundRoot .ob-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px}
#outboundRoot .ob-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0 0}
#outboundRoot .ob-actions .ob-muted{flex:1 1 220px}
#outboundRoot .ob-more{margin:0 0 16px}
#outboundRoot .ob-more summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--brand-ink);
  list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
#outboundRoot .ob-more summary::-webkit-details-marker{display:none}
#outboundRoot .ob-more summary::before{content:'+';font-size:13px;color:var(--brand-ink);width:12px}
#outboundRoot .ob-more[open] summary::before{content:'–'}
#outboundRoot .ob-more[open] summary{margin-bottom:12px}

#outboundRoot .ob-drop{display:block;border-radius:var(--radius-sm);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hairline);padding:22px 16px;text-align:center;cursor:pointer;margin:0 0 16px}
#outboundRoot .ob-drop:hover,#outboundRoot .ob-drop.is-over{box-shadow:inset 0 0 0 2px var(--brand)}
#outboundRoot .ob-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#outboundRoot .ob-drop b{display:block;font-size:14px;color:var(--obsidian)}
#outboundRoot .ob-drop span{display:block;font-size:12.5px;color:var(--smoke);margin-top:4px}

/* ── the checklist that answers "what do I do first" ───────────────────── */
#outboundRoot .ob-start{background:var(--white);border-radius:var(--radius);padding:22px;margin:0 0 18px;
  box-shadow:0 0 0 1px var(--rc,var(--brand)),var(--drop-lg)}
#outboundRoot .ob-start h2{font-family:var(--display);font-size:19px;margin:0 0 4px;color:var(--obsidian);letter-spacing:-.01em}
#outboundRoot .ob-start > p{margin:0 0 6px;font-size:13.5px;color:var(--stone)}
#outboundRoot .ob-step{display:flex;gap:14px;align-items:center;padding:16px 0;
  border-top:1px solid var(--hairline)}
#outboundRoot .ob-step-n{flex:none;width:26px;height:26px;border-radius:var(--radius-pill);
  background:var(--sunk);color:var(--stone);font:600 12.5px/26px var(--sans);text-align:center}
#outboundRoot .ob-step.is-done .ob-step-n{background:var(--live);color:#fff}
#outboundRoot .ob-step.is-now .ob-step-n{background:var(--rc,var(--brand));color:#fff}
#outboundRoot .ob-step-b{flex:1;min-width:0}
#outboundRoot .ob-step-t{font-size:14.5px;font-weight:600;color:var(--obsidian);margin:0 0 3px}
#outboundRoot .ob-step.is-done .ob-step-t{color:var(--stone);font-weight:500}
#outboundRoot .ob-step-s{font-size:13px;color:var(--stone);margin:0;line-height:1.5}
#outboundRoot .ob-step-a{flex:none}

/* ── numbers ───────────────────────────────────────────────────────────── */
#outboundRoot .ob-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 18px}
#outboundRoot .ob-tile{background:var(--white);border-radius:var(--radius-sm);padding:15px 16px;
  box-shadow:var(--ring-card)}
#outboundRoot .ob-tile-n{font-family:var(--display);font-size:26px;line-height:1.1;color:var(--obsidian)}
#outboundRoot .ob-tile-l{font-size:12px;color:var(--stone);margin-top:3px}
#outboundRoot .ob-tile.is-kept{box-shadow:0 0 0 1px var(--kept)}
#outboundRoot .ob-tile.is-kept .ob-tile-n{color:var(--kept)}
#outboundRoot .ob-tile-a{display:inline-block;margin-top:8px;font-size:12px;color:var(--brand-ink);
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
#outboundRoot .ob-tile-a:hover{text-decoration:underline}

/* ── tables ────────────────────────────────────────────────────────────── */
#outboundRoot .ob-tblwrap{overflow-x:auto;margin:0 -6px}
#outboundRoot .ob-tbl{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left}
#outboundRoot .ob-tbl th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--smoke);padding:0 12px 9px;border-bottom:1px solid var(--hairline);white-space:nowrap}
#outboundRoot .ob-tbl td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:middle;
  color:var(--charcoal)}
#outboundRoot .ob-tbl tbody tr:last-child td{border-bottom:0}
#outboundRoot .ob-tbl tbody tr:hover td{background:var(--paper)}
#outboundRoot .ob-tbl .ob-em{color:var(--obsidian);font-weight:500}
#outboundRoot .ob-tbl td.ob-right{text-align:right;white-space:nowrap}

/* ── pills, meta, empties ──────────────────────────────────────────────── */
#outboundRoot .ob-pill{display:inline-block;font:500 11px/1 var(--sans);padding:5px 10px;
  border-radius:var(--radius-pill);background:var(--sunk);color:var(--stone);white-space:nowrap;vertical-align:middle}
#outboundRoot .ob-pill.is-active,#outboundRoot .ob-pill.is-ok,#outboundRoot .ob-pill.is-booked,
#outboundRoot .ob-pill.is-sent{background:var(--live);color:#fff}
#outboundRoot .ob-pill.is-suppressed,#outboundRoot .ob-pill.is-bad,#outboundRoot .ob-pill.is-closed,
#outboundRoot .ob-pill.is-paused,#outboundRoot .ob-pill.is-failed{background:var(--alarm);color:#fff}
#outboundRoot .ob-pill.is-wait,#outboundRoot .ob-pill.is-draft,#outboundRoot .ob-pill.is-held,
#outboundRoot .ob-pill.is-needs_attention,#outboundRoot .ob-pill.is-awaiting_reply{background:var(--kept);color:#fff}
#outboundRoot .ob-muted{color:var(--stone);font-size:13px}
#outboundRoot .ob-meta{margin:5px 0 0;font-size:13px;color:var(--stone);line-height:1.5}
#outboundRoot .ob-mono{font-family:var(--mono);font-size:11.5px;word-break:break-all;color:var(--charcoal)}
#outboundRoot .ob-empty{background:var(--white);border-radius:var(--radius);box-shadow:var(--ring-card);
  padding:48px 24px;text-align:center}
#outboundRoot .ob-empty h3{font-family:var(--display);font-size:17px;margin:0 0 7px;color:var(--obsidian)}
#outboundRoot .ob-empty p{margin:0 auto 18px;font-size:13.5px;color:var(--stone);max-width:44ch;line-height:1.55}

/* ── the campaign wizard ───────────────────────────────────────────────── */
#outboundRoot .ob-wiz-rail{display:flex;gap:10px;margin:0 0 20px;flex-wrap:wrap;align-items:center}
#outboundRoot .ob-wiz-s{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--smoke)}
#outboundRoot .ob-wiz-s + .ob-wiz-s::before{content:'';width:20px;height:1px;background:var(--hairline)}
#outboundRoot .ob-wiz-s i{font-style:normal;width:22px;height:22px;border-radius:var(--radius-pill);
  background:var(--sunk);color:var(--stone);font:600 11.5px/22px var(--sans);text-align:center}
#outboundRoot .ob-wiz-s.is-on{color:var(--obsidian);font-weight:600}
#outboundRoot .ob-wiz-s.is-on i{background:var(--rc,var(--brand));color:#fff}
#outboundRoot .ob-wiz-s.is-done i{background:var(--live);color:#fff}
#outboundRoot .ob-pane[hidden]{display:none}

/* ── review ────────────────────────────────────────────────────────────── */
#outboundRoot .ob-draft{max-width:720px}
#outboundRoot .ob-why{display:block;padding:11px 13px;border-radius:var(--radius-sm);
  font-size:13px;margin:0 0 16px;line-height:1.5}
#outboundRoot .ob-why.is-bad{background:var(--rt,var(--sunk));color:var(--alarm);box-shadow:0 0 0 1px var(--alarm)}
#outboundRoot .ob-why.is-ok{background:var(--sunk);color:var(--live)}
#outboundRoot .ob-steps{margin:10px 0 0;padding-left:20px}
#outboundRoot .ob-steps li{margin:0 0 8px;font-size:13.5px;color:var(--charcoal);line-height:1.55}

/* ── inbox ─────────────────────────────────────────────────────────────── */
#outboundRoot .ob-inbox{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){#outboundRoot .ob-inbox{grid-template-columns:1fr}}
#outboundRoot .ob-convs{display:flex;flex-direction:column;gap:8px;max-height:66vh;overflow-y:auto}
#outboundRoot .ob-conv{display:block;width:100%;text-align:left;appearance:none;border:0;cursor:pointer;
  background:var(--white);box-shadow:var(--ring-card);font:inherit;font-size:13px;
  padding:13px 14px;border-radius:var(--radius-sm);color:var(--charcoal)}
#outboundRoot .ob-conv:hover{box-shadow:var(--ring-card-hover)}
#outboundRoot .ob-conv.is-on{box-shadow:0 0 0 1px var(--rc,var(--brand))}
#outboundRoot .ob-conv b{display:block;color:var(--obsidian);font-size:13.5px;margin-bottom:5px}
#outboundRoot .ob-conv-p{display:block;color:var(--stone);font-size:12.5px;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#outboundRoot .ob-msgs{display:flex;flex-direction:column;gap:12px;margin:14px 0}
#outboundRoot .ob-msg{border-radius:var(--radius-sm);padding:13px 15px;font-size:14px;max-width:62ch;
  line-height:1.55;color:var(--charcoal)}
#outboundRoot .ob-msg.is-in{background:var(--paper);box-shadow:var(--ring-ghost)}
#outboundRoot .ob-msg.is-out{align-self:flex-end;background:var(--rt,var(--sunk));color:var(--ri,var(--charcoal))}
#outboundRoot .ob-msg-h{font-size:11.5px;color:var(--smoke);margin-bottom:6px}

/* ── locked ────────────────────────────────────────────────────────────── */
#outboundRoot .ob-locked{text-align:center;padding:48px 24px;max-width:560px;margin:0 auto}
#outboundRoot .ob-locked h2{margin-bottom:12px}
#outboundRoot .ob-yours{margin-top:16px}

@media(max-width:620px){
  #outboundRoot .ob-shell{padding:18px 16px 72px}
  #outboundRoot .ob-h1{font-size:22px}
  #outboundRoot .ob-card,#outboundRoot .ob-start{padding:18px}
  #outboundRoot .ob-step{flex-wrap:wrap}
  /* The button drops under the step on a phone. margin-left pushed it past
     the card's own padding and out the right edge; it gets the full width of
     the text column instead, box-sizing included so the ring is inside it. */
  #outboundRoot .ob-step-a{flex:1 0 100%;margin:2px 0 0}
  #outboundRoot .ob-step-a .btn{display:block;width:100%;box-sizing:border-box;text-align:center}
}

/* A campaign saved with a piece left for later finishes on its own card. */
#outboundRoot .ob-fix{margin:0 0 4px}
#outboundRoot .ob-fix .ob-field{max-width:420px}

/* ── One question, then a plan ─────────────────────────────────────────────
   Scoped under #outboundRoot, and every colour a token: app.css wins over a
   bare class here, and a literal would be one theme's value in both. */
#outboundRoot .ob-ask { max-width: 46rem; }
#outboundRoot .ob-ask .ob-lede { color: var(--stone); margin: 0 0 1.25rem; }
#outboundRoot .ob-ask textarea,
#outboundRoot .ob-plan textarea { width: 100%; resize: vertical; }
#outboundRoot .ob-or {
  margin: .75rem 0; color: var(--stone); font-size: .875rem;
  display: flex; align-items: center; gap: .75rem;
}
#outboundRoot .ob-or::before,
#outboundRoot .ob-or::after { content: ""; flex: 1; height: 1px; background: var(--ash); }
#outboundRoot .ob-acts { display: flex; gap: .5rem; padding-top: .75rem; }
#outboundRoot .ob-hint { color: var(--stone); font-size: .8125rem; margin: .5rem 0 0; }
#outboundRoot .ob-manual { margin-top: 1.5rem; }
#outboundRoot .ob-manual summary { cursor: pointer; color: var(--stone); font-size: .875rem; }

#outboundRoot .ob-plan { max-width: 52rem; }
#outboundRoot .ob-plan .ob-row { display: flex; gap: .75rem; flex-wrap: wrap; }
#outboundRoot .ob-plan .ob-row > .ob-field { flex: 1 1 14rem; }
#outboundRoot .ob-plan .ob-narrow { flex: 0 0 9rem; }

/* What needs you, above the numbers. Kept visually quieter than an alarm:
   these are ordinary chores, not failures. */
#outboundRoot .ob-needs .ob-acts-list { list-style: none; margin: 0; padding: 0; }
#outboundRoot .ob-needs .ob-acts-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ash);
}
#outboundRoot .ob-needs .ob-acts-list li:last-child { border-bottom: 0; }
#outboundRoot .ob-stuck li { margin-bottom: .5rem; }
#outboundRoot .ob-working { color: var(--stone); font-size: .875rem; margin: 0 0 1rem; }

@media (max-width: 560px) {
  #outboundRoot .ob-plan .ob-row { display: block; }
  #outboundRoot .ob-plan .ob-narrow { width: 100%; }
  #outboundRoot .ob-needs .ob-acts-list li { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Candidate facts read off the owner's own site, offered as ticks.
   Scoped under the room's own id, like everything else here: .shell section
   rules in app.css outrank a bare class and strip the padding off. */
#outboundRoot .ob-facts { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; }
#outboundRoot .ob-fact { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
#outboundRoot .ob-fact:hover { background: var(--paper-2, rgba(0,0,0,.03)); }
#outboundRoot .ob-fact input { margin: 3px 0 0; flex: 0 0 auto; }
#outboundRoot .ob-fact span { line-height: 1.45; }
#outboundRoot .ob-goalsplit { margin: 10px 0 0; font-size: 13px; color: var(--smoke); }
#outboundRoot .ob-outcomes { margin: 10px 0 0; }