/* Prospect Research revamp shell. Dark theme per PDF tokens.
 * Every existing view keeps its selectors and ids; only presentation changes. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The landing's full-bleed band uses width:100vw, which on Windows includes
 * the scrollbar (~17px) and would add a stray horizontal scrollbar. Clip
 * (never hidden: no scroll container, no sticky breakage) at the viewport. */
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Horizontal gutter of the app shell (#app and friends). One home: the
 * landing's full-bleed band rebuilds the column from this var, so changing
 * the gutter cannot silently de-align the band. */
:root { --app-pad-x: 1.5rem; }

.site-header, #app, .site-footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem var(--app-pad-x);
}


/* Header */
.site-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  margin: 0.5rem 0 0.25rem;
  font-size: 2rem;
}
.tagline { color: var(--muted); margin-top: 0; }
.site-logo { height: 2.2rem; width: auto; align-self: center; }

/* Step nav */
.steps ol {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; padding: 0;
}
.steps li {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.steps li.active { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.steps li.done { border-color: var(--success); color: var(--success); }

/* Views */
.view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin-bottom: 1rem;
  animation: view-in 0.3s ease-out both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Skeletons for research steps + shortlist cards while data loads. */
.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel {
  to { background-position: -200% 0; }
}
li.skel-card {
  list-style: none;
  border-radius: var(--radius-card);
  min-height: 12rem;
  margin-bottom: 1rem;
}
.checklist li.skel-step {
  border-radius: var(--radius-sm);
  min-height: 3.2rem;
  border-top: 0;
  padding: 0;
  margin-bottom: 0.6rem;
}
.checklist li.skel-step::before { display: none; }
.view h2 {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
/* In-app pages open with their business, not the brand (owner 2026-11-04:
   the sidebar already says Prospect Research) — compact headlines. */
#view-shortlist h2, #view-status h2, #view-drafts h2,
#view-campaigns h2, #view-senders h2, #view-progress h2 {
  font-size: 1.45rem;
  margin: 0.3rem 0 0.25rem;
}

/* PDF flow screens: no outer card, content floats on the ground. */
.view-plain {
  background: transparent;
  border: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.view-plain > h2, .display {
  font-size: 2.6rem;
  line-height: 1.1;
}
.brand-mark { height: 1.6rem; width: 1.6rem; flex: 0 0 auto; }

/* Kicker colour variants (PDF kickers vary by context).
 * Double class beats the later single-class .kicker base rule. */
.kicker.kicker-dim { color: var(--muted); }
.kicker.kicker-green { color: var(--success); }
.kicker.kicker-blue { color: var(--info); }

/* Link variants: gold action links, plain header links. */
.link-gold {
  background: transparent; color: var(--accent);
  padding: 0.7rem 0.2rem; min-height: var(--touch);
  font-weight: 600; text-decoration: none;
}
.link-gold:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link-plain {
  background: transparent; color: var(--muted);
  padding: 0.7rem 0.2rem; min-height: var(--touch);
  font-weight: 600; text-decoration: none;
}
.link-plain:hover { color: var(--text); }
.view-source { color: var(--accent); }
.view-source:hover { color: var(--accent); }
a { color: var(--accent); text-underline-offset: 3px; }
.hint { color: var(--muted); font-size: 0.92rem; }

/* Forms */
label { display: block; margin: 0.7rem 0; font-weight: 600; }
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: var(--surface-deep);
  min-height: var(--touch);
}
input::placeholder, textarea::placeholder { color: var(--dim); }
.input-xl { font-size: 1.5rem; line-height: 1.4; padding: 1rem 1.2rem; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 1rem; }
legend { padding: 0 0.5rem; font-weight: 700; }

/* Buttons: one control family — 44px tall, 12px radius, 600 weight
   (style guide: buttons, inputs and tabs share ONE height and ONE radius). */
button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.7rem 1.4rem;
  min-height: var(--touch);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
button.danger { background: var(--danger); color: var(--accent-ink); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.row { display: flex; gap: 0.6rem; margin-top: 1rem; }
.form-error { color: var(--danger); font-weight: 600; }

/* Profile confirm */
#profile-fields dt { font-weight: 700; margin-top: 0.8rem; }
#profile-fields dd { margin: 0.2rem 0; color: var(--muted); }
.prov { font-size: 0.78rem; border-radius: var(--radius-pill); padding: 0.1rem 0.55rem; margin-left: 0.4rem; }
.prov.stated { background: var(--surface-deep); color: var(--accent); border: 1px solid var(--border-strong); }
.prov.extracted { background: var(--surface-success); color: var(--success); }
.prov.assumed { background: transparent; color: var(--warn); border: 1px dashed var(--warn); }

/* Progress */
.budget { font-size: 0.88rem; color: var(--muted); }

/* Shortlist (PDF screen 4: tabs, pick cards, sticky bar) */
.tabs { display: flex; gap: 0.6rem; margin: 1rem 0; flex-wrap: wrap; }
.tabs [role="tab"] {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem; min-height: var(--touch); font-weight: 600;
}
.tabs [role="tab"][aria-selected="true"] {
  background: var(--white); border-color: var(--white);
  color: var(--ink-strong); font-weight: 700;
}
#prospect-list { list-style: none; padding: 0; margin: 0; }
#prospect-list li.pick {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
#prospect-list li[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(227, 180, 92, 0.25); }
.pick-top { display: flex; align-items: flex-start; gap: 0.9rem; }
.pick-top h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; flex: 1; min-width: 0; }
.pick-top .tag { flex: 0 0 auto; margin-top: 0.2rem; }
.tag-line { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); }
.pick-tick { flex: 0 0 auto; margin-top: 0.2rem; }
.pick-tick input[type="checkbox"] { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); cursor: pointer; }
.pick-sub { margin: 0.2rem 0 0.9rem 2.3rem; }
.pick-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-left: 2.3rem; }
.pick-cols h4 {
  margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 700;
  color: var(--accent); letter-spacing: 0.02em;
}
.pick-cols p { margin: 0.2rem 0; overflow-wrap: anywhere; }
.pick-open { margin: 0.9rem 0 0 2.3rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
#shortlist-bar {
  position: sticky; bottom: 0; z-index: 5;
  width: 100vw; margin: 1.5rem 0 0 calc(50% - 50vw);
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface-deep);
  border-top: 1px solid var(--border);
  padding: 1rem calc(50vw - 50% + 0rem);
}
#shortlist-bar p { margin: 0; font-weight: 600; }
#shortlist-bar button { margin-left: auto; flex: 0 0 auto; }
/* The sticky bar overlays page bottom — give the evidence panel clearance
   so accordions are never hidden underneath it. */
#evidence-panel { padding-bottom: 92px; margin-bottom: -64px; }
#evidence-panel { margin-top: 1rem; }
#evidence-panel blockquote {
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
}
#evidence-panel cite { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }

/* Drafts */
.draft { border: 1px solid var(--border); background: var(--surface-deep); border-radius: var(--radius-sm); padding: 0.8rem; margin-bottom: 0.8rem; }
.draft textarea { min-height: 7rem; }

/* Message studio (PDF screen 5) */
.studio-title { font-size: 2.6rem; line-height: 1.08; }
.studio h2 .decision { font-weight: 700; font-size: 1rem; }
.studio .decision.approved { color: var(--success); }
.studio .decision.rejected { color: var(--danger); }
.studio .decision.pending { color: var(--warn); }
.studio .decision.deferred { color: var(--muted); }
.studio-pager { margin: 0.8rem 0; }
.studio-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; }
.studio-main > * + * { margin-top: 1rem; }
.studio-main .tabs { margin: 0; }
.studio-card { margin: 0; }
.studio-card .kicker { margin-top: 0; }
.studio-subject { font-weight: 700; font-size: 1.05rem; }
.studio-text { font-size: 1.2rem; line-height: 1.55; }
.studio-text p { margin: 0.5rem 0; }
.studio-editor { margin-top: 0.8rem; }
.studio-editor textarea { min-height: 9rem; }
.word-line {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--success); font-weight: 600;
  border-top: 1px solid var(--border); padding-top: 0.9rem; margin-bottom: 0;
}
.word-line .tick { width: 0.85rem; height: 0.7rem; flex: 0 0 auto; }
#studio-tones:empty { display: none; }
.tone-row { margin-bottom: 0; }
.sender-card { display: flex; align-items: center; gap: 1rem; }
.sender-card p { margin: 0; flex: 1; min-width: 0; }
.sender-card .link-gold { flex: 0 0 auto; }
.studio-actions { align-items: center; flex-wrap: wrap; }
.studio-actions button { white-space: nowrap; }
.studio-status { color: var(--muted); font-size: 0.92rem; margin: 0; }
.studio-status:empty { display: none; }
.why { margin: 0; }
.why .kicker { margin-top: 0; }
.why-row { padding: 0.9rem 0; border-top: 1px solid var(--border); }
.why-row:first-of-type { border-top: 0; }
.why h4 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.why-fact { color: var(--success); }
.why-hyp { color: var(--accent); }
.why-dim { color: var(--dim); }
.why p { margin: 0.15rem 0; }
.why a { color: var(--accent); }
.why .note-box { margin-top: 0.9rem; }

/* Status board */
/* The dashboard board: one plain-language feed across ALL campaigns — a
   priority group first, calm cards, style-guide radii throughout. */
.board { display: grid; gap: 0.7rem; }
.board-group { background: var(--surface-deep); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 0.8rem 0.9rem; }
.board-group.board-primary { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent-soft); }
.board-group h3 { margin: 0 0 0.5rem; font-size: 0.98rem; display: flex; align-items: center; gap: 0.4rem; }
.board-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.board-group li { display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.35rem 0.55rem; font-size: 0.88rem; }
.board-group .campaign-chip { flex-shrink: 0; }
.board-group .board-item { padding: 0.1rem 0.2rem; }
.board-empty { text-align: center; padding: 0.7rem 0.4rem 0.4rem; color: var(--muted); }
.board-empty p { margin: 0; font-size: 0.88rem; }

/* Campaigns */
.campaigns { margin-top: 1rem; border-top: 2px solid var(--border); padding-top: 0.8rem; }
.campaign { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7rem; margin-bottom: 0.6rem; background: var(--surface-deep); }
.campaign h4 { margin: 0 0 0.3rem; }
.campaign .meta { color: var(--muted); font-size: 0.85rem; }
.campaign ul { list-style: none; padding: 0; margin: 0.4rem 0; font-size: 0.88rem; }

/* Chips, choices, help */
.chips { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0; flex-wrap: wrap; }
.chips span { color: var(--muted); font-size: 0.9rem; }
.chips button { background: transparent; color: var(--text); border: 1px solid var(--border-strong); padding: 0.4rem 0.9rem; min-height: var(--touch); }
#clarify-more { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 1rem; padding: 0.6rem 0.8rem; }
#clarify-more summary { cursor: pointer; font-weight: 700; }
.timeline { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.timeline li { border-left: 3px solid var(--border); padding: 0.3rem 0 0.3rem 0.6rem; margin-bottom: 0.4rem; font-size: 0.88rem; }
.timeline li.contact { border-color: var(--success); }
.log-contact { display: grid; gap: 0.4rem; margin-top: 0.8rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.log-contact .row { margin-top: 0.4rem; }
.choice-row { display: flex; gap: 0.6rem; margin: 0.8rem 0; flex-wrap: wrap; }
.choice-row button { flex: 1 1 9rem; text-align: left; }
.choice-row small { font-weight: 400; opacity: 0.85; }
.help-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 1rem; background: var(--surface-deep); margin: 0.8rem 0; }
.help-box p { margin: 0.5rem 0; }
.help-box ol, .help-box ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.help-box li { margin-bottom: 0.35rem; }
#step-nav li[data-view="senders"] { cursor: pointer; }
#sender-form details { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 1rem; padding: 0.6rem 0.8rem; }
#sender-form summary { cursor: pointer; font-weight: 700; }

/* Motion primitives (PDF: rise, float, pulse, lift). */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.live-dot {
  display: inline-block;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}
.site-footer { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 800px) {
  .shortlist-grid { grid-template-columns: 1fr; }
  .choice-row button { flex-basis: 100%; }
  .row { flex-wrap: wrap; }
  #shortlist-bar { flex-wrap: wrap; }
  #shortlist-bar button { margin-left: 0; width: 100%; }
}

@media (max-width: 480px) {
  :root { --app-pad-x: 1rem; }
  .site-header, #app, .site-footer { padding: 0.8rem var(--app-pad-x); }
  .site-header h1 { font-size: 1.6rem; }
  .view { padding: 1.1rem; border-radius: 20px; }
  .view-plain { padding: 0.8rem 0.2rem; }
  .view-plain > h2, .display { font-size: 2rem; }
  .input-xl { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .view, .live-dot, .skel { animation: none; transition: none; }
  .speak-btn.recording, .speak-btn.transcribing, .speak-eq i { animation: none; }
  .thinking-line { animation: none; background: none; color: var(--muted); }
  .thinking-dots i, .btn-spinner { animation: none; }
}

/* Landing v2 (Revamp references: desktop + phone PNGs). Mobile first.
 * Shared rules used outside the landing: .card, .kicker, .muted,
 * .small, .tag. */
.view-landing {
  animation: rise var(--motion-rise) ease-out both;
  max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 3rem;
}
.view-landing h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  font-size: clamp(2rem, 5.2vw + 1rem, 3.2rem);
  line-height: 1.1;
  margin: 0.5rem 0 1rem;
}
.l-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0 2rem;
}
.l-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  white-space: nowrap;
}
.brand-mark { width: 1.6rem; height: 1.6rem; }
.l-signin {
  color: var(--text); text-decoration: none; font-weight: 700;
  font-size: 0.9rem;
  min-height: var(--touch); display: inline-flex; align-items: center;
  white-space: nowrap;
}
.l-signin:hover { color: var(--text); }
.l-signin-note {
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.8rem 1rem; margin: 0 0 1rem;
}
.l-hero { display: grid; gap: 2rem; padding-bottom: 3rem; }
.l-title { font-size: clamp(2.6rem, 7vw + 1rem, 4.4rem); line-height: 1.04; }
.l-title em { color: var(--accent); font-style: italic; }
.l-sub { color: var(--muted); font-size: 1.1rem; max-width: 34rem; }
.btn-gold {
  background: var(--accent); color: var(--accent-ink);
  font-size: 1.05rem; padding: 1rem 1.8rem; min-height: 64px;
  white-space: nowrap;
  transition: transform 0.2s ease-out;
}
.btn-gold:hover { transform: translateY(calc(-1 * var(--motion-lift))); }
.l-micro { color: var(--dim); font-size: 0.9rem; margin-top: 0.8rem; }
.l-art { pointer-events: none; }
.l-art svg { width: 100%; height: auto; display: block; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.l-problem {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--surface-deep);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 3.5rem 0;
}
/* Band content reuses the landing container's exact numbers (72rem box +
 * 1.5rem padding) so band text lines up with every other section. The old
 * per-child `> *` centering was defeated by .kicker / .view-landing h2
 * margin rules (specificity + source order) and pinned text to the window
 * edge; a real inner container cannot lose that fight. */
/* Band content must land on the same text edge as every landing section.
 * Sections sit inside two padding layers (#app + .view-landing, each 1.5rem)
 * and their column box is the landing's border box:
 * min(72rem, 100vw) - 2 * var(--app-pad-x). The band escapes both paddings
 * (100vw bleed), so band-in rebuilds that exact geometry and adds the
 * landing's own 1.5rem padding around its text. */
.l-band-in {
  max-width: calc(min(72rem, 100vw) - 2 * var(--app-pad-x));
  margin-left: auto; margin-right: auto;
  padding-left: 1.5rem; padding-right: 1.5rem;
}
.l-problem h2 { max-width: 42rem; }
.l-guide { padding-top: 3.5rem; }
.l-guide h2 { max-width: 46rem; }
.l-guide .muted { max-width: 36rem; }
.l-steps { padding-top: 2.5rem; }
.l-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; }
.l-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.l-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1; color: var(--accent);
}
.l-steps h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0.3rem 0 0.3rem; }
.l-steps p { margin: 0; color: var(--muted); }
.l-steps-kicker { margin-bottom: 1.2rem; }
.l-compare { display: grid; gap: 1rem; padding-top: 3rem; }
.l-with {
  background: var(--green-deep);
  border-radius: var(--radius-card); padding: 1.8rem;
}
.l-without {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 1.8rem;
}
.l-compare .kicker { margin-bottom: 0.7rem; }
.l-compare-line { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; margin: 0; }
.l-trust {
  list-style: none; margin: 0; padding: 2.5rem 0 0;
  display: grid; gap: 0.7rem; color: var(--muted); font-weight: 600;
}
.l-trust li { display: flex; align-items: center; gap: 0.6rem; }
.l-trust svg { width: 0.9rem; height: 0.75rem; color: var(--success); flex: 0 0 auto; }
.l-final {
  background: var(--accent); border-radius: 28px;
  padding: 3rem 1.5rem; text-align: center; margin-top: 3rem;
}
.l-final h2 { color: var(--accent-ink); font-size: clamp(2rem, 5vw + 1rem, 3rem); max-width: 30rem; margin: 0 auto 1.6rem; }
.btn-dark {
  background: var(--ink-strong); color: var(--white);
  font-size: 1.05rem; padding: 1rem 1.8rem; min-height: 64px;
  white-space: nowrap;
  transition: transform 0.2s ease-out;
}
.btn-dark:hover { transform: translateY(calc(-1 * var(--motion-lift))); }
.l-foot { color: var(--dim); font-size: 0.85rem; margin: 2rem 0 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
}
.card h3 { margin: 0.2rem 0 0.5rem; font-size: 1.25rem; }
.card h4 { margin: 0.9rem 0 0.2rem; font-size: 1rem; }
.card p { margin: 0.35rem 0; }
.kicker { color: var(--accent); font-weight: 700; font-size: 0.8rem; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tag {
  display: inline-block; font-size: 0.75rem; font-weight: 700;
  border-radius: var(--radius-pill); padding: 0.32rem 0.95rem;
}
.tag-green { background: rgba(94, 221, 176, 0.14); color: var(--success); }
.tag-gold { background: rgba(227, 180, 92, 0.14); color: var(--accent); }
/* Landing v2 responsive: phone stacks (guide folds away per the phone
 * reference); desktop spreads the hero, steps, compare and trust. */
@media (max-width: 899px) {
  .l-guide { display: none; }
  .l-hero .btn-gold, .l-final .btn-dark { width: 100%; }
}
@media (max-width: 480px) {
  .btn-gold, .btn-dark { font-size: 1rem; padding: 1rem 1.2rem; }
}
@media (min-width: 900px) {
  .l-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; padding-bottom: 4rem; }
  .l-steps-kicker { display: none; }
  .l-steps ol { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .l-steps li { grid-template-columns: 1fr; border-top: 1px solid var(--border-strong); padding-top: 1.2rem; }
  .l-compare { grid-template-columns: 1.2fr 1fr; }
  .l-trust { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .view-landing, .l-art svg { animation: none; }
  .btn-gold, .btn-dark { transition: none; }
  .btn-gold:hover, .btn-dark:hover { transform: none; }
}

/* Onboarding chat (PDF screen 2). */
.ob-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.2rem; }
.ob-head .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0; white-space: nowrap; }
.ob-head > :last-child { text-align: right; }
.ob-head .linklike, .ob-head .link-plain, .ob-head .kicker { margin-left: auto; }
.ob-head .link-plain { white-space: nowrap; }
.linklike {
  background: transparent; color: var(--muted);
  padding: 0.7rem 0.2rem; min-height: var(--touch);
  font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}
.linklike:hover { color: var(--text); }
#view-onboard h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 1.2rem 0 0.2rem; }
.ob-progress { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0.4rem; }
.ob-progress p { margin: 0; }
.segs { display: flex; gap: 0.4rem; flex: 0 1 14rem; }
.ob-first-phase .segs { flex-basis: 8rem; }
.segs span { height: 0.45rem; flex: 1; border-radius: var(--radius-pill); background: var(--border-strong); }
.segs span.done { background: var(--accent); }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); flex: 0 0 auto; display: inline-block; }
.ob-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; margin-top: 1.4rem; }
.ob-main > * + * { margin-top: 1.6rem; }
.ob-said { display: flex; gap: 1rem; align-items: flex-start; }
.ob-said > div { flex: 1; min-width: 0; }
.ob-said .kicker { margin-top: 0; }
.ob-said p { margin: 0.2rem 0; }
.ob-said .link-gold { flex: 0 0 auto; }
#view-onboard #ob-question {
  font-weight: 800;
  font-size: 1.35rem; line-height: 1.25;
  letter-spacing: normal;
  margin: 0 0 0.4rem;
}
#ob-sub { margin: 0 0 0.6rem; }
.input-answer {
  font-size: 1.25rem; line-height: 1.45;
  padding: 1.2rem 1.3rem; border-color: var(--accent);
  border-radius: 20px; resize: vertical;
}
#ob-chips { margin-top: 0.6rem; }
#ob-chips:empty { display: none; }
.ob-got .kicker { margin-top: 0; }
.got-title { display: flex; align-items: center; gap: 0.55rem; }
#ob-fields { margin: 0.4rem 0 0; display: grid; }
.ob-row { display: block; padding: 0.95rem 0; border-top: 1px solid var(--border); }
.ob-row dt { margin: 0; color: var(--dim); font-size: 0.88rem; font-weight: 600; }
.ob-row dd { margin: 0.15rem 0 0; font-size: 1.1rem; font-weight: 600; }
.ob-row dd input { min-height: 2.6rem; padding: 0.45rem 0.7rem; font-size: 1rem; }
.ob-row dd .linklike { font-size: 0.9rem; }
.ask-now { color: var(--accent); }
.guess {
  font-size: 0.78rem; font-weight: 600;
  color: var(--warn); border: 1px dashed var(--warn);
  border-radius: var(--radius-pill); padding: 0.1rem 0.55rem;
  white-space: nowrap;
}
.note-box {
  background: var(--surface-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-bottom: 0;
}

/* Onboarding first screen (Revamp screen 2): one box, one job. */
.vh {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
#btn-ob-back { margin-right: auto; }
#ob-first { max-width: 56rem; margin: 0 auto; padding-top: 2rem; }
#ob-first h2 {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: var(--tracking-display);
  font-size: clamp(1.5rem, 2.2vw + 0.9rem, 2rem);
  line-height: 1.14; margin: 0 0 0.6rem;
}
#ob-first .hint { font-size: 1.05rem; margin: 0 0 1.6rem; }
.ob-box {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px; padding: 1.4rem 1.4rem 1rem;
}
.ob-box:focus-within { border-color: var(--accent); }
#f-description {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 0; resize: vertical;
  color: var(--text); font: inherit;
  font-size: 1.35rem; line-height: 1.5; min-height: 9rem;
}
#f-description:focus { outline: none; }
#f-description::placeholder { color: var(--dim); }
.ob-box-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem;
}
.speak-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
  font-size: 1rem; min-height: var(--touch);
}
.speak-btn svg { width: 1rem; height: 1rem; }
/* Thinking state (Gemini-style shimmer + soft dots) while the model reads
 * the reply and picks the next question. The working button morphs instead
 * of going dead: spinner inside, label "Working…", secondary dims. */
#ob-thinking { margin: 0.4rem 0 1.4rem; }
.thinking-line {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
  background: linear-gradient(90deg, var(--muted) 25%, var(--white) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: thinking-shimmer 1.8s linear infinite;
}
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: thinking-dot 1.2s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes thinking-dot {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-4px); opacity: 1; }
}
.btn-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block; vertical-align: middle;
  margin-right: 8px;
  animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
#btn-ob-continue[aria-busy="true"] { min-width: 10.5rem; }
#ob-actions button:disabled { opacity: 0.45; transition: opacity 0.2s ease-out; }
/* Recording feedback: accent border + pulsing ring + equalizer bars while
 * the mic is live; a slower unified pulse while transcribing. Reduced-motion
 * users get the color change and the label text, never the motion. */
.speak-btn.recording, .speak-btn.transcribing {
  border-color: var(--accent); color: var(--accent);
}
.speak-btn.recording { animation: speak-pulse 1.6s ease-out infinite; }
.speak-eq { display: none; align-items: center; gap: 2px; height: 1rem; }
.speak-eq i {
  width: 3px; border-radius: 2px; background: currentColor;
  height: 35%; animation: speak-eq 0.9s ease-in-out infinite;
}
.speak-eq i:nth-child(2) { animation-delay: 0.15s; }
.speak-eq i:nth-child(3) { animation-delay: 0.3s; }
.speak-eq i:nth-child(4) { animation-delay: 0.45s; }
.speak-btn.recording .speak-eq, .speak-btn.transcribing .speak-eq { display: inline-flex; }
.speak-btn.recording > svg, .speak-btn.transcribing > svg { display: none; }
.speak-btn.transcribing .speak-eq i { animation: speak-steady 1.2s ease-in-out infinite; }
@keyframes speak-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@keyframes speak-eq {
  0%, 100% { height: 30%; }
  50% { height: 95%; }
}
@keyframes speak-steady {
  0%, 100% { height: 30%; opacity: 0.55; }
  50% { height: 60%; opacity: 1; }
}
.speak-short { display: none; }
#onboard-form .btn-gold { margin-top: 1.6rem; min-width: 16rem; }
#onboard-form .l-micro { margin-top: 0.9rem; }
#onboard-form .micro-short { display: none; text-align: center; }

@media (max-width: 800px) {
  .ob-grid { grid-template-columns: 1fr; }
  #view-onboard #ob-question { font-size: 2rem; }
  .ob-said { flex-direction: column; }
  .ob-said .link-gold { align-self: flex-start; padding-top: 0; }
  .ob-progress { flex-wrap: wrap; }
  .segs { flex: 1 1 100%; }
  #ob-first { padding-top: 0.5rem; }
  #onboard-form .btn-gold { width: 100%; margin-top: 0.9rem; }
  #onboard-form .micro-long { display: none; }
  #onboard-form .micro-short { display: block; }
  .sub-long { display: none; }
  .speak-long { display: none; }
  .speak-short { display: inline; }
}

/* Research progress (PDF screen 3). */
.working {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--success); font-weight: 600; margin: 1rem 0 0.4rem;
}
#progress-kicker { margin: 0 0 0 0; }
.stats { margin: 1.2rem 0; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 1.2rem 1.4rem;
  text-align: left;
}
.stat-card.stat-gold { border-color: var(--accent); }
.stat-gold .stat-num { color: var(--accent); }
.stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.6rem; line-height: 1; margin: 0;
}
.stats .muted { margin: 0.2rem 0 0; }
.progress-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
#found-wrap { grid-column: 1 / -1; }
/* Set-aside: a quiet secondary card — small heading, tight rows (the old
   narrow cramped rail read as an afterthought, owner 2026-11-03). */
#progress-setaside-wrap .kicker { margin-bottom: 0.35rem; }
#progress-setaside-wrap .hint { display: none; }
#progress-setaside { display: grid; gap: 0.3rem; }
#progress-setaside li { padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.84rem; line-height: 1.35; display: grid; gap: 0.1rem; }
#progress-setaside li span { color: var(--muted); font-size: 0.8rem; }
/* Legacy compact rows (the expanded recent-searches list). */
.runs-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, #EAF1FF 0%, #F1EEFB 100%); padding: var(--s7); display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s5); align-items: center; box-shadow: var(--lift); }
.hero-hi { font-weight: 600; color: var(--sky-deep); margin: 0 0 var(--s2); font-size: 15px; }
.hero-title { font-size: clamp(28px, 3.4vw, 38px); margin: 0; }
.hero-lead { color: var(--ink-soft); font-size: 18px; margin: var(--s3) 0 0; max-width: 46ch; }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.reassure { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); font-size: 14px; color: var(--ink-soft); }
.reassure svg { width: 18px; height: 18px; flex: none; color: var(--sage-ink); }
.hero-art { width: 100%; height: auto; max-height: 260px; }
.home-sec { margin-top: var(--s6); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: 22px; }
.sec-head p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.step .dot { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--mist); color: var(--ink-soft); }
.step.done .dot { background: var(--sage-wash); color: var(--sage-ink); }
.step.now { border-color: var(--sky); background: var(--sky-wash); }
.step.now .dot { background: var(--sky); color: #fff; }
.step b { display: block; font-size: 15px; }
.step span { font-size: 14px; color: var(--ink-soft); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.camp { display: flex; flex-direction: column; gap: var(--s4); transition: box-shadow .2s, transform .2s; }
.camp:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.camp header { display: flex; gap: var(--s3); align-items: center; }
.camp .badge { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; flex: none; }
.camp h3 { font-size: 18px; margin: 0; }
.camp .big { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; }
.camp .sub { color: var(--ink-soft); font-size: 14px; }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--sky); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.home-card { border-radius: var(--r-lg); padding: var(--s5); }
.tabs { display: flex; gap: var(--s1); padding: var(--s1); background: var(--mist); border-radius: var(--r-md); margin-bottom: var(--s3); flex-wrap: wrap; }
.tab { flex: 1; min-height: 44px; min-width: 0; border: 0; background: transparent; border-radius: var(--r-sm); font: 600 14px var(--font-body); color: var(--ink-soft); cursor: pointer; padding: 0 10px; white-space: nowrap; display: flex; gap: var(--s2); align-items: center; justify-content: center; }
.tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(27, 42, 58, .1); }
.tab .n { background: var(--line); border-radius: var(--r-pill); padding: 0 8px; font-size: 12px; }
.tab[aria-selected="true"] .n { background: var(--sky-wash); color: var(--sky-deep); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
/* Scoped to .rows: the bare .row class is the app's generic button row. */
.rows .row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); min-height: 64px; }
.rows .row:hover { border-color: var(--border-strong); }
.rows .row .name { font-weight: 600; flex: 1; min-width: 0; }
.rows .row .name small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.row-foot { display: flex; justify-content: center; margin-top: var(--s3); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5); border-radius: var(--r-sm); border: 1.5px solid transparent; font: 600 15px var(--font-body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: var(--sky-deep); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sky); color: var(--sky-deep); }
.btn-quiet { background: transparent; color: var(--sky-deep); padding: 0 var(--s3); min-height: 44px; }
.btn-quiet:hover { background: var(--sky-wash); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.run { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.run:last-child { border-bottom: 0; }
.run b { display: block; }
.run span.d { color: var(--ink-soft); font-size: 14px; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s6) var(--s4); border-radius: var(--r-md); background: var(--mist); }
.empty svg { width: 120px; height: auto; }
.empty p { color: var(--ink-soft); max-width: 36ch; margin: 0; }
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding: var(--s6) var(--s5); }
  .hero-art { max-height: 180px; }
  .journey, .cards, .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.run-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.42rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.run-row .run-main { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.run-row .run-title { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.run-row .run-title .run-status { font-size: 0.68rem; padding: 0.1rem 0.5rem; }
.run-row .run-meta { color: var(--muted); font-size: 0.78rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.waiting-flag { font-style: normal; color: var(--gold, #8a6d1c); font-weight: 700; }
.run-status { font-size: 0.76rem; font-weight: 700; padding: 0.16rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-2, var(--ground)); white-space: nowrap; }
.run-status.st-running, .run-status.st-assessing { color: var(--accent); background: var(--accent-soft); }
.run-status.st-awaiting_approval { color: var(--gold, #8a6d1c); background: #f6edd4; }
.run-status.st-complete { color: var(--success); background: var(--success-soft, #e7f3ec); }
.run-status.st-failed, .run-status.st-stopped { color: #a33; background: #fbe9e7; }
/* Compact quiet pagers — the same pattern everywhere (consistency). */
.board-pager { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; font-size: 0.8rem; }
.pager-btn, .board-pager button { padding: 0.12rem 0.5rem; font-size: 0.8rem; }
.board-pager button:disabled, .pager-btn:disabled { opacity: 0.4; cursor: default; }
/* The latest pending issues across ALL campaigns (dashboard). */
#waiting-strip { display: grid; gap: 0.35rem; margin: 0.6rem 0; }
.waiting-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.42rem 0.7rem; border: 1px solid var(--accent, #c9a227); border-radius: var(--radius); background: var(--surface); }
.waiting-row .run-meta { color: var(--muted); font-size: 0.82rem; flex: 1; }
/* Small campaign labels on every view that shows one campaign's data. */
.campaign-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.14rem 0.6rem; border-radius: var(--radius-pill); background: var(--surface-2, var(--ground)); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
#board-switch { margin: 0.4rem 0 0.6rem; }
.steps-card { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; }
.checklist li {
  padding: 0.95rem 0 0.95rem 1.9rem; position: relative; color: var(--muted);
  border-top: 1px solid var(--border);
}
.checklist li:first-child { border-top: 0; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 1.15rem;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  border: 2px solid var(--border-strong);
}
.checklist li.done { color: var(--text); }
.checklist li.done::before { border: 0; background: var(--success); }
.checklist li.done::after {
  content: "";
  position: absolute; left: 0.24rem; top: 1.36rem;
  width: 0.44rem; height: 0.44rem; background: var(--ink-strong);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checklist li.active { color: var(--text); font-weight: 700; }
.step-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.step-count { color: var(--accent); font-weight: 700; white-space: nowrap; }
.checklist .bar { display: block; height: 0.4rem; background: var(--border); border-radius: var(--radius-pill); margin-top: 0.55rem; }
.checklist .bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
#progress-setaside { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.6rem; }
#progress-setaside li {
  background: var(--surface-deep); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem;
}
#progress-setaside li strong { display: block; margin-bottom: 0.1rem; }
#progress-setaside li span { color: var(--dim); font-size: 0.9rem; }
#progress-setaside-wrap .kicker { margin-top: 0; }
#progress-setaside-wrap .hint { margin: 0.4rem 0 0.8rem; }
#btn-preview-progress { margin-top: 0.8rem; }
#btn-stop-progress { display: block; margin-top: 0.2rem; }
.budget { color: var(--dim); font-size: 0.9rem; margin: 1rem 0 0; }

@media (max-width: 800px) {
  /* Stats stay 3-up inline on phones (stacked cards pushed the live step
     list below the fold — owner report 2026-11-03: "I have to scroll down
     to notice what's happening"). */
  .trio.stats { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin: 0.7rem 0; }
  .stat-card { padding: 0.45rem 0.5rem; }
  .stat-num { font-size: 1.3rem; margin: 0; }
  .stats .muted { font-size: 0.68rem; }
  .progress-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .view h2 { font-size: 1.45rem; line-height: 1.2; }
  .progress-grid { margin-top: 0.6rem; }
  .pick-cols { grid-template-columns: 1fr; gap: 0.8rem; }
  .pick-sub, .pick-cols, .pick-open { margin-left: 0; }
  .pick-top { flex-wrap: wrap; }
  .pick-top .tag { margin-top: 0; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-title { font-size: 2rem; }
  .sender-card { flex-wrap: wrap; }
}


/* ===== Reference theme layer (workspace.html + landing.html, 2026-10-31).
 * Sits on top of the token flip: component shapes, focus, pills, dots and
 * the light landing. 48px targets, mobile-first, reduced-motion aware. ===== */

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

body { background: var(--ground); }

/* Header as a light bar; step pills */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header h1 { font-family: var(--font-display); }
.steps li { border-radius: var(--radius-pill); font-weight: 700; }
.steps li.active { background: var(--accent-soft); }
.steps li.done { color: var(--success); }

/* Buttons: pills with the reference shadow */
.btn-gold, .btn-dark, #btn-ob-continue, #btn-ob-finish, #btn-confirm-profile,
.studio-actions button, .pick-actions button {
  border-radius: var(--radius-pill); font-weight: 800;
  box-shadow: 0 8px 20px rgba(11, 18, 32, 0.10);
}
.btn-gold { background: var(--accent); color: #fff; }
.btn-gold:hover { box-shadow: 0 12px 26px rgba(61, 90, 254, 0.30); }
.btn-dark { background: var(--ink-strong); color: #fff; }
.link-gold { color: var(--accent-deep); font-weight: 700; }
.link-gold:hover { text-decoration: underline; }

/* Views and cards: white cards on paper, gentle hover */
.view { border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04); }
.card, .ob-box, .pick, .studio-card, .why, .sender-card, .ob-said {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.pick { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.pick:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 18, 32, 0.08); }

/* Tags: soft status pills */
.tag-green { background: var(--surface-success); color: var(--success); }
.tag-gold { background: var(--marigold-soft); color: var(--marigold-ink); }
.tag-line { background: var(--ground); border: 1px solid var(--border); color: var(--muted); }

/* Forms: 14px radius, white */
input, textarea, select {
  border-radius: var(--radius-sm); background: #fff; color: var(--text);
}
#f-description, .input-answer { background: transparent; }

/* Landing: rebuild per landing.html */
.view-landing { background: var(--ground); }
.l-nav { padding: 22px 0; }
.l-brand { font-family: var(--font-display); font-size: 22px; }
.l-title { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; max-width: 15ch; }
.l-title em { font-style: normal; color: var(--accent); }
.l-sub { font-size: clamp(18px, 2.2vw, 20px); color: var(--muted); max-width: 520px; }
.l-hero { padding: clamp(28px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); gap: clamp(28px, 5vw, 56px); }

/* Example card: a picture, never interactive */
.l-stage { flex: 1 1 340px; display: flex; justify-content: center; }
.l-example { position: relative; width: 100%; max-width: 470px; display: flex; flex-direction: column; gap: 16px; }
.l-example .tag { position: absolute; top: -14px; right: 18px; z-index: 2; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--ink-strong); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.l-example .lead { background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 24px; box-shadow: 0 24px 60px rgba(11, 18, 32, 0.10); animation: floaty 7s ease-in-out infinite; pointer-events: none; }
.l-example .lead-head { display: flex; gap: 14px; align-items: center; }
.l-example .avatar { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; flex: none; }
.l-example .lead-head h3 { font-family: var(--font-display); font-size: 22px; margin: 0; }
.l-example .lead-head p { margin: 2px 0 0; font-size: 14px; color: var(--dim); }
.l-example .chip { margin-left: auto; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-success); color: var(--success); white-space: nowrap; }
.l-example .why { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--marigold-soft); border: 0; }
.l-example .why b { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marigold-ink); }
.l-example .why span { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--text); }
.l-example .why small { display: block; margin-top: 4px; color: var(--dim); font-size: 13px; }
.l-example .reach { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cc { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; background: #fff; }
.cc .ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc .dot { position: absolute; right: -1px; top: -1px; width: 12px; height: 12px; border-radius: 50%; background: #12B76A; border: 2px solid #fff; }
.l-example .reach small { color: var(--dim); font-size: 13px; font-weight: 600; }
.l-bubble { position: relative; margin-left: 36px; background: #E6F7EE; border: 1px solid #C5EBD6; border-radius: 24px 24px 24px 6px; padding: 20px 22px; animation: floaty 7s ease-in-out 1.4s infinite; }
.l-bubble .lab { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--success); display: flex; align-items: center; gap: 8px; }
.l-typed { margin: 10px 0 0; font-size: 17px; line-height: 1.5; min-height: 6.1em; color: var(--text); }
.l-typed.typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--text); vertical-align: -3px; animation: caret-blink 1s steps(1) infinite; }
.l-status { margin-left: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 14px 18px; font-weight: 700; font-size: 15px; color: var(--muted); transition: background 0.4s, color 0.4s, border-color 0.4s; }
.l-status.ok { background: var(--surface-success); border-color: #B7E4CC; color: var(--success); }
.l-status .pill { padding: 8px 18px; border-radius: var(--radius-pill); background: var(--border); color: var(--muted); font-size: 14px; transition: all 0.4s; }
.l-status.ok .pill { background: var(--success); color: #fff; }
@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Landing sections: plain blocks, steps with top rules, duo, trust, gold final */
.l-problem { width: auto; margin: 0; background: transparent; border: 0; padding: clamp(48px, 8vw, 96px) 0 0; }
.l-band-in { max-width: none; padding: 0; }
.l-problem .kicker, .l-guide .kicker { color: var(--accent-deep); }
.l-problem h2, .l-guide h2 { font-size: clamp(30px, 5vw, 54px); line-height: 1.08; max-width: 22ch; }
.l-guide { padding-top: clamp(40px, 7vw, 80px); }
.l-steps { padding-top: clamp(36px, 6vw, 64px); }
.l-steps-kicker { color: var(--accent-deep); }
.l-steps ol { gap: clamp(20px, 3vw, 28px); }
.l-steps li { border-top: 2px solid var(--ink-strong); padding-top: 22px; }
.l-num { color: var(--accent); font-size: 48px; }
.l-steps h3 { font-size: 24px; }
.l-compare { padding-top: clamp(40px, 6vw, 72px); }
.l-with { background: var(--accent); color: #fff; border-radius: 28px; }
.l-with .kicker { color: rgba(255, 255, 255, 0.85); }
.l-with .l-compare-line { color: #fff; }
.l-without { background: var(--surface); border: 1px solid var(--border); border-radius: 28px; }
.l-without .l-compare-line { color: var(--muted); }
.l-compare-line { font-size: clamp(22px, 2.6vw, 30px); }
.l-trust { padding-top: clamp(36px, 5vw, 56px); color: var(--muted); font-size: 16px; }
.l-trust svg { color: #12B76A; }
.l-final { background: var(--marigold); border-radius: clamp(28px, 4vw, 40px); padding: clamp(40px, 7vw, 72px) clamp(24px, 5vw, 56px); margin-top: clamp(48px, 7vw, 88px); }
.l-final h2 { color: var(--ink-strong); font-size: clamp(32px, 5.6vw, 60px); }
.l-final .btn-dark { background: var(--ink-strong); color: #fff; border-radius: var(--radius-pill); font-weight: 800; }
.l-foot { padding-bottom: 40px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* Thinking state on light: ink shimmer, marigold dots */
.thinking-line {
  background: linear-gradient(90deg, var(--dim) 25%, var(--ink-strong) 50%, var(--dim) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.thinking-dots i { background: var(--marigold); }

/* Progress: ultramarine bars on light track */
.bar { background: var(--border); }
.bar span { background: var(--accent); }
.segs span { background: var(--border-strong); }
.segs span.done { background: var(--marigold); }

/* Skeletons on paper */
.skel { background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%); }

/* Studio + status board chips read on light */
.decision { color: var(--muted); }
.decision.approved { color: var(--success); }
.decision.rejected { color: var(--danger); }
.tabs button[aria-selected="true"] { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

/* Sign-in: one card, one button */
.signin-card { max-width: 460px; margin: clamp(48px, 10vh, 120px) auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(28px, 5vw, 44px);
  box-shadow: 0 24px 60px rgba(11, 18, 32, 0.08); text-align: center; }
.signin-card .kicker { color: var(--accent-deep); }
.signin-title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 8px 0 12px; }
.signin-sub { color: var(--muted); font-size: 16px; margin: 0 0 26px; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  min-height: var(--touch); background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border-strong); box-shadow: 0 4px 14px rgba(11, 18, 32, 0.06); }
.btn-google:hover { border-color: var(--accent); box-shadow: 0 8px 20px rgba(61, 90, 254, 0.14); }
.btn-google svg { width: 22px; height: 22px; flex: none; }
.signin-note2 { color: var(--warn); font-size: 14px; font-weight: 600; margin: 16px 0 0; min-height: 1em; }
.signin-back { margin-top: 18px; background: none; border: 0; cursor: pointer; font: inherit; min-height: var(--touch); padding: 0 8px; }

/* Run recovery: bring the owner back to a run that survived on the server */
.resume-card { max-width: 620px; margin: 0 auto 28px; background: var(--surface);
  border: 1.5px solid var(--accent); border-radius: var(--radius-card);
  padding: clamp(20px, 4vw, 32px); box-shadow: 0 18px 44px rgba(61, 90, 254, 0.12); }
.resume-card .kicker { color: var(--accent-deep); }
.resume-title { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 6px 0 10px; }
.resume-status { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.resume-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Evidence panel: accordions, proof rows, tidy contact-log form */
#evidence-panel .acc { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px;
  background: var(--surface); overflow: hidden; }
#evidence-panel .acc summary { cursor: pointer; font-weight: 700; padding: 12px 14px;
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: var(--touch); }
#evidence-panel .acc summary::-webkit-details-marker { display: none; }
#evidence-panel .acc summary::before { content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s ease; }
#evidence-panel .acc[open] summary::before { transform: rotate(45deg); }
#evidence-panel .acc summary:hover { background: var(--accent-soft); }
#evidence-panel .acc > *:not(summary) { padding: 0 14px 12px; }
ul.proofs, ul.timeline { list-style: none; margin: 0; padding: 0; }
.proof { border-top: 1px solid var(--border); padding: 10px 0 0; margin: 0 0 10px; }
.proof:first-child { border-top: 0; }
.proof-claim { margin: 0 0 4px; }
.proof-src { margin: 0; color: var(--muted); font-size: 13px; }
.proof-src a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.proof-src a:hover { text-decoration: underline; }
ul.timeline li { padding: 6px 0; border-top: 1px dashed var(--border); font-size: 14px; }
ul.timeline li:first-child { border-top: 0; }
ul.timeline li.contact { color: var(--accent-deep); font-weight: 600; }
ul.routes { list-style: none; margin: 0; padding: 0; }
.route { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.route:first-child { border-top: 0; }
.route-chip { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 12px;
  border-radius: var(--radius-pill); padding: 4px 10px; flex: none; }
.route-value { font-size: 14px; overflow-wrap: anywhere; }
.route-verify { color: var(--muted); font-size: 12px; flex: none; }
.copy-route { background: none; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; min-height: 30px; padding: 0 12px; cursor: pointer; margin-left: auto; }
.copy-route:hover { border-color: var(--accent); color: var(--accent-deep); }
.route-edit input { min-height: 38px; border: 1.5px solid var(--border-strong); border-radius: 10px;
  padding: 6px 10px; font: inherit; background: var(--surface); color: var(--text); flex: 1 1 140px; }
.route-edit button { background: var(--accent); border: 0; border-radius: var(--radius-pill); color: #fff;
  font: inherit; font-weight: 700; font-size: 13px; min-height: 38px; padding: 0 16px; cursor: pointer; }

.status-chip { display: inline-block; background: var(--accent-soft); color: var(--accent-deep);
  font-weight: 700; font-size: 13px; border-radius: var(--radius-pill); padding: 4px 12px; margin: 6px 0 0; }

/* Manual send (WhatsApp/email) in the Message studio */
.send-card { border: 1.5px solid var(--accent); }
.wa-app-row { margin: 10px 0; }
.wa-app { cursor: pointer; }
.wa-app.selected { border-color: var(--accent); color: var(--accent-deep); font-weight: 700; }
.wa-open { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); margin: 4px 6px 4px 0;
  background: var(--accent); border: 0; border-radius: var(--radius-pill); color: #fff;
  font: inherit; font-weight: 700; padding: 0 18px; cursor: pointer; }
.wa-open:hover { filter: brightness(1.08); }
.wa-warn { font-weight: 600; font-size: 12px; color: #FFE9C7; }
.wa-test { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 10px; }
.wa-test label { font-size: 13px; font-weight: 700; color: var(--muted); flex: none; }
.wa-test input { flex: 1 1 180px; min-height: 40px; border: 1.5px solid var(--border-strong);
  border-radius: 10px; padding: 6px 10px; font: inherit; background: var(--surface); color: var(--text); }
.wa-test button { background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--radius-pill);
  color: var(--accent-deep); font: inherit; font-weight: 700; font-size: 13px; min-height: 40px; padding: 0 16px; cursor: pointer; }
.log-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--border); }
.log-contact .lf { display: flex; flex-direction: column; gap: 4px; }
.log-contact .lf-wide { grid-column: 1 / -1; }
.log-contact label { font-size: 13px; font-weight: 700; color: var(--muted); }
.log-contact select, .log-contact input { min-height: 42px; border: 1.5px solid var(--border-strong);
  border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--surface); color: var(--text); }
.log-contact .row { grid-column: 1 / -1; margin: 0; }

/* Header auth area */
.auth-area { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.auth-link { color: var(--accent-deep); font-weight: 700; font-size: 0.92rem; text-decoration: none; padding: 0 8px; min-height: var(--touch); display: inline-flex; align-items: center; white-space: nowrap; }
.auth-link:hover { text-decoration: underline; }
.auth-chip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 14px;
  border-radius: var(--radius-pill); padding: 8px 16px; }
.auth-out { background: none; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; min-height: 40px; padding: 0 16px; cursor: pointer; }
.auth-out:hover { border-color: var(--accent); color: var(--accent-deep); }

/* Contact verification dots on route lines */
.route-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #12B76A; margin-right: 6px; vertical-align: 1px; }
.route-dot.unchecked { background: var(--marigold); }
.route-dot.bad { background: #F04438; }

@media (prefers-reduced-motion: reduce) {
  .l-example .lead, .l-bubble { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .l-typed.typing::after { animation: none; }
}

/* Dashboard bar: REMOVED 2026-11-02 — replaced by the app sidebar (.sidebar). */

/* ============================================================
   App shell: left sidebar + content column (2026-11-02).
   The sidebar is the app's navigation, like any normal workspace
   app: Dashboard, Messages, Campaigns, Senders, account at the
   bottom. Quiet items — navigation is never a filled button;
   the page's one primary action keeps the fill (Nielsen:
   consistency & standards; aesthetic & minimalist design).
   ============================================================ */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.shell.no-side { display: block; }
.shell.no-side .sidebar { display: none; }
.sidebar {
  position: sticky; top: 0;
  align-self: flex-start;
  height: 100vh;
  width: 15.5rem; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.1rem 0.85rem;
  background: var(--ground);
  border-right: 1px solid var(--border);
}
.sb-brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  padding: 0 0.5rem; white-space: nowrap;
}
/* Inline nav icons (stroke style, inherit the item's color). */
.sb-ico {
  width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
/* Quiet reconnect strip: shown while the device is offline; the run keeps
   working server-side (owner directive 2026-11-03: network resilience). */
.net-banner {
  background: var(--marigold-soft, #FFF4DC); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.75rem; margin: 0 0 0.4rem;
}
.sb-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.sb-item {
  display: inline-flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem;
  font: inherit; font-weight: 600; color: var(--muted);
  cursor: pointer;
  min-height: var(--touch);
}
.sb-item:hover { background: var(--surface); color: var(--text); }
.sb-item.active { background: var(--accent-soft); color: var(--accent-deep); }
.sb-account {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--border);
}
.auth-chip {
  max-width: 10rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; overflow-wrap: normal;
}
.sb-content { flex: 1; min-width: 0; }

/* Quiet nav on the landing: a text link, same as Sign in — never a
   filled pill (the global button style must not leak into nav). */
button.l-signin { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

/* This campaign's stages: a contextual trail, not navigation. Shown only
   while a campaign is in play; clickable to revisit what was done. On the
   run view it mounts INTO the page flow (stage-slot), compact, under the
   headline (owner 2026-11-03: the top pill row wasted the best space). */
.stage-strip {
  max-width: 72rem; margin: 0 auto;
  padding: 0.35rem var(--app-pad-x) 0;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
}
.stage-label {
  color: var(--dim); font-size: 0.78rem; font-weight: 700;
}
.stage-slot { margin: 0.55rem 0 0; }
.stage-slot .stage-strip { padding: 0; max-width: none; }
/* Compact trail: hairline chips, quiet colors, the active stage the only
   loud one — a map of where you are, not a toolbar. */
.steps ol { gap: 0.4rem; }
.steps li {
  border: 0; background: none; border-radius: var(--radius-pill);
  padding: 0.22rem 0.6rem; font-size: 0.78rem; color: var(--dim); font-weight: 500;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--border); text-underline-offset: 3px;
}
.steps li.active { color: var(--accent); font-weight: 700; text-decoration: none; background: var(--surface-2, var(--surface)); }
.steps li.done { color: var(--muted); text-decoration-style: solid; }

@media (max-width: 880px) {
  .shell { display: block; }
  /* Compact top bar: brand + account share the first row; the four nav
     items live on their own single scrollable row — never a stacked
     column beside the brand (user report 2026-11-03). */
  .sidebar {
    position: static; height: auto; width: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.15rem 0.5rem;
    padding: 0.55rem 0.9rem;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .sb-brand { order: 1; font-size: 1rem; }
  .sb-account { order: 2; margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 0.6rem; border-top: 0; padding: 0; }
  /* Bottom tab bar with icons: the modern mobile pattern — the four sections
     live in a fixed thumb-reach bar, text never shifts the screen. */
  .sb-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    order: initial; width: auto; overflow: visible;
    background: var(--ground); border-top: 1px solid var(--border);
    display: flex; flex-direction: row; flex-wrap: nowrap;
    justify-content: space-around; align-items: stretch;
    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
  }
  .sb-item {
    order: initial; width: auto; min-height: 2.7rem;
    flex: 1 1 0; display: inline-flex; flex-direction: column; align-items: center;
    gap: 0.12rem; padding: 0.32rem 0.3rem;
    font-size: 0.62rem; font-weight: 700; color: var(--muted);
    white-space: nowrap; text-align: center;
  }
  .sb-item.active { color: var(--accent-deep); background: none; }
  .sb-ico {
    width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
  }
  /* Stage trail: one scrollable row on phones, never a multi-row block —
     the scroll container is the nav so the page never overflows. */
  .stage-strip .steps { display: block; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .stage-strip .steps::-webkit-scrollbar { display: none; }
  .stage-strip .steps ol { flex-wrap: nowrap; width: max-content; min-width: 100%; }
  .stage-strip .steps li { flex: 0 0 auto; padding: 0.26rem 0.65rem; font-size: 0.78rem; }
  #app, .stage-strip { padding-bottom: 0; }
  .sb-content { padding-bottom: 4.3rem; }
  /* The shortlist's sticky action bar sits above the tab bar. */
  #shortlist-bar { bottom: 3.95rem; }
  #evidence-panel { padding-bottom: 140px; }
  .auth-link, .auth-out { font-size: 0.9rem; white-space: nowrap; }
  .auth-chip { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  /* The onboard header repeats the brand the top bar already shows — drop
     the pair on phones, keep "Save and exit" alone at the right. */
  .ob-head .brand-mark, .ob-head .brand { display: none; }
  .ob-head { justify-content: flex-end; }
}

/* Unfinished-work banner (owner report 2026-11-03): a crashed run must be
   visible and continuable right on the dashboard, never blank columns. */
.run-banner {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 0.8rem 1rem; margin: 0 0 1rem;
}
.run-banner .kicker { margin: 0 0 0.2rem; }
.run-banner .meta { margin: 0; color: var(--muted); font-size: 0.9rem; }
.run-banner button { flex: 0 0 auto; }
.run-banner.stopped { border-left-color: var(--marigold, var(--accent)); }
.run-banner.ready { border-left-color: var(--success); }

/* Studio overview (2026-11-03): Messages opens as a list of every message,
   never straight inside "message 1 of 1". */
.studio-overview { display: flex; flex-direction: column; gap: 0.5rem; }
.studio-overview h3 { margin: 0; }
.draft-rows { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.draft-row {
  display: grid; grid-template-columns: 1.1fr auto 2fr auto; align-items: center;
  gap: 0.8rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.65rem 0.85rem; cursor: pointer;
  font: inherit; color: inherit;
}
.draft-row:hover { border-color: var(--border-strong); background: var(--surface-deep); }
.draft-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-row-dec { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--paper-soft, #F1EFE9); color: var(--muted); white-space: nowrap; }
.draft-row-dec.approved { background: var(--accent-soft); color: var(--accent-deep); }
.draft-row-dec.rejected { background: #F6E4E0; color: #8A3A2B; }
.draft-row-preview { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-row-open { color: var(--accent-deep); font-weight: 700; white-space: nowrap; }
@media (max-width: 800px) {
  .draft-row { grid-template-columns: 1fr auto; }
  .draft-row-preview { display: none; }
  .draft-row-open { grid-column: 2; }
}

/* "Everything we found" (2026-11-03): the run view shows the full search —
   the owner may want to use it, not just the filtered shortlist. */
.found-list { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.found-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.found-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.found-list .tag { flex: 0 0 auto; }
.found-list .tag.dim { background: var(--paper-soft, #F1EFE9); color: var(--muted); }
.found-list .tag.good { background: var(--accent-soft); color: var(--accent-deep); }
.found-meta { color: var(--dim); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }

/* ============================================================
   Dashboard revamp (2026-11-02): the landing's paper theme —
   white cards on the paper ground, one calm accent stripe per
   column, soft shadows, roomy type. Vibrant through color
   accents, not through noise.
   ============================================================ */
.board { gap: 0.9rem; }
.board-sub { color: var(--muted); margin: 0.2rem 0 1.1rem; }
.column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
}
.column[data-col="approved"]  { border-top-color: var(--success); }
.column[data-col="pending"]   { border-top-color: var(--accent); }
.column[data-col="followups"] { border-top-color: var(--marigold); }
.column[data-col="deferred"]  { border-top-color: var(--warn); }
.column[data-col="rejected"]  { border-top-color: var(--border-strong); }
.column h3 { font-size: 0.92rem; margin: 0 0 0.65rem; letter-spacing: 0.01em; }
.column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.column li {
  background: var(--ground);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.93rem;
}

/* Campaign monitor cards: same card language, human content. */
.campaign {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.55rem;
}
.campaign h4 { margin: 0 0 0.15rem; font-size: 0.95rem; }
.campaign .meta { color: var(--dim); font-size: 0.82rem; margin: 0 0 0.45rem; }
.campaign ul { list-style: none; margin: 0 0 0.35rem; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.campaign li { font-size: 0.9rem; color: var(--muted); }

/* ---- Campaign model alignment (2026-11-02, round 3) ---- */

/* Board items are doors to the message detail: quiet rows, clear affordance. */
.board-item {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: var(--accent-deep);
  cursor: pointer; text-align: left;
  min-height: 1.6rem;
}
.board-item:hover { text-decoration: underline; }

/* The board breathes: 5 message columns wrap naturally at every width. */
.board { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }

/* Campaigns view: the current campaign card (the run IS the campaign). */
.campaign-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
  margin-bottom: 1.2rem;
}
.campaign-card .kicker { color: var(--accent-deep); font-weight: 700; font-size: 0.72rem; margin: 0 0 0.2rem; }
.campaign-card h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 0.25rem; }
.campaign-card .meta { color: var(--muted); margin: 0 0 0.4rem; }

/* Section rhythm inside the campaigns view. */
.sec-h { margin: 1.6rem 0 0.2rem; font-family: var(--font-display); font-size: 1.15rem; }

/* Campaign scheduler: collapsed recipient rows (tap to open the message),
   pagination for large recipient lists (user report 2026-11-02). */
.campaign summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; cursor: pointer; list-style: none;
}
.campaign summary::-webkit-details-marker { display: none; }
.campaign[open] summary {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem; margin-bottom: 0.5rem;
}
.campaign .r-name { font-weight: 600; }
.campaign summary .meta { text-align: right; }
.pager { align-items: center; }
.pager .meta { color: var(--dim); }

/* ============================================================
   Style-guide completion pass (2026-11-04, dashboard.html + style-guide.md).
   Gaps the earlier layers left: the status chip system, sidebar sizing to
   the reference, and the plain-language search history. Appended last so
   these exact rules win the cascade without touching older sheets.
   ============================================================ */

/* Status chips (reference section 4): pill, tinted wash, colour dot PLUS a
   text label — colour is never the only signal. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.chip-wait { background: var(--sand-wash); color: var(--sand); }
.chip-done { background: var(--sage-wash); color: var(--sage-ink); }
.chip-info { background: var(--sky-wash); color: var(--sky-deep); }
.chip-no { background: var(--rose-wash); color: var(--rose); }

/* Sidebar to the reference: 20px icons, 19px brand, white hover on the
   mist sidebar (the old rule hovered white-on-white). */
.sb-brand { font-size: 19px; }
.sb-ico { width: 20px; height: 20px; }
.sb-item:hover { background: var(--paper); color: var(--ink); }

/* Recent-search rows: the whole summary stays quiet; the run history rows
   (behind "See all") keep the 44px Open door at a comfortable size. */
.runs-list .run-open { min-height: 44px; }

/* A quiet chip variant for the legacy run-status pills so the expanded
   history matches the new palette (was paper-grey). */
.run-status.st-awaiting_approval { color: var(--sand); background: var(--sand-wash); }
.run-status.st-complete { color: var(--sage-ink); background: var(--sage-wash); }
.run-status.st-failed, .run-status.st-stopped { color: var(--rose); background: var(--rose-wash); }
.waiting-flag { color: var(--sand); }

/* ============================================================
   Responsive pass (2026-11-04, owner: "let text in buttons not be
   squeezed, wrap smart, consider mobile, use responsive fonts").
   - Fluid type: display sizes breathe with the viewport between the
     guide's floor and ceiling (38 / 22 / 18 / 16 / 14 / 13).
   - Buttons never squeeze: labels stay on one line; groups drop to
     full-width rows on small screens instead of compressing.
   - Smart wrapping: headlines balance, body text avoids orphans.
   ============================================================ */

/* Fluid type (min at 320px, max at the guide's scale) */
.hero-title { font-size: clamp(26px, 5vw, 38px); }
.sec-head h2 { font-size: clamp(19px, 2.2vw, 22px); }
.hero-lead { font-size: clamp(16px, 1.6vw, 18px); }
.camp .big { font-size: clamp(26px, 4.5vw, 32px); }
.view-plain > h2, .display { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.stat-num { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }

/* Smart wrapping */
.hero-title, .sec-head h2 { text-wrap: balance; }
.hero-lead, .empty p, .hint, .run span.d { text-wrap: pretty; }

/* Buttons: a label is never compressed — one line, natural width */
.btn, button { white-space: nowrap; }
.btn-quiet { white-space: nowrap; }

/* Inputs to the guide: white, 1.5px hairline, sky focus ring */
input, textarea, select {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px var(--sky-wash);
}

/* ---------- Small screens (phones, 520px and under) ---------- */
@media (max-width: 520px) {
  /* Hero: actions become two full-width 44px targets; copy keeps air. */
  .hero { padding: var(--s6) var(--s4); }
  .hero-actions { gap: var(--s2); }
  .hero-actions .btn { flex: 1 1 100%; }
  .reassure { font-size: 13px; }

  /* Campaign cards: the CTA spans the card, never squeezed. */
  .camp .btn { width: 100%; }

  /* Tabs fold to a 2x2 grid so four labels never compress to mush. */
  .tabs { display: grid; grid-template-columns: 1fr 1fr; }

  /* Message rows: the name gets its own line; chip + action share the
     second — nothing is truncated or crushed. */
  .rows .row { flex-wrap: wrap; row-gap: var(--s2); }
  .rows .row .name { flex: 1 1 100%; }
  .rows .row .chip { margin-right: auto; }

  /* Recent searches: sentence on one line, chip drops below. */
  .run { flex-wrap: wrap; row-gap: var(--s2); }
  .run > div { flex: 1 1 100%; }

  /* Journey tiles stack with breathing room. */
  .journey { gap: var(--s3); }
  .step { padding: var(--s4) var(--s3); }
}

/* Mid screens (tablets, 521px to 1000px): two columns of breathing room. */
@media (min-width: 521px) and (max-width: 1000px) {
  .hero-actions .btn { flex: 0 0 auto; }
  .camp .btn { width: 100%; }
}

/* Very wide screens: cap the two-column split so lines stay ~70ch. */
@media (min-width: 1400px) {
  .two { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* ============================================================
   Campaigns page pass (2026-11-04, design-excellence review).
   One card per send: status is a word + colour chip (never
   colour alone), counts ride an honest meta sentence, the
   recipient list caps at five with the real remainder stated.
   ============================================================ */
.campaigns .campaign {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
}
.camp-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.camp-top h4 { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.camp-top .secondary { min-height: 38px; padding: 0.35rem 0.9rem; font-size: 0.86rem; }
.campaign .meta { color: var(--ink-soft); font-size: 0.86rem; margin: 0.35rem 0 0.5rem; }
.camp-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.camp-recs li { display: flex; align-items: center; gap: var(--s3); padding: 0.4rem 0; border-top: 1px solid var(--mist-line, var(--line)); min-width: 0; }
.camp-recs li:first-child { border-top: 0; }
.camp-recs .r-mail { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; color: var(--ink); }
.camp-more { color: var(--ink-soft); font-size: 0.86rem; }
.chip-mini { font-size: 12px; padding: 2px 10px; }
.campaigns .empty { margin-top: var(--s2); }

/* The scheduler's recipient rows: hairline-separated summary rows,
   the message one tap away (no walls of boxes). */
#campaign-wizard details.campaign {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.8rem var(--s4);
}
#campaign-wizard details.campaign summary {
  display: flex; align-items: baseline; gap: var(--s3); cursor: pointer;
  padding: 0.35rem 0; list-style: none;
}
#campaign-wizard details.campaign summary::-webkit-details-marker { display: none; }
#campaign-wizard details.campaign summary .r-name { font-weight: 600; }
#campaign-wizard details.campaign summary .meta { color: var(--ink-soft); font-size: 0.85rem; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
#campaign-wizard details.campaign label { margin-top: 0.8rem; }
#campaign-wizard details.campaign[open] summary { border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; margin-bottom: 0.4rem; }

/* The old 2px rule above the monitor becomes a hairline (guide: hairlines before borders). */
.campaigns { border-top: 1px solid var(--line); padding-top: var(--s4); }

/* Empty-state action rows centre with their card. */
.empty .row { justify-content: center; }

/* ============================================================
   Journey pass (2026-11-04, owner feedback on the live run).
   - The stage trail becomes a CHAIN: numbered steps plugged into
     each other with chevrons, done steps carry a check, the
     current step glows. A step is clickable only when its stage
     has data; the cursor says which.
   - The running research phase pulses (dotted animation), counts
     never regress.
   - Clickable things get the pointer cursor.
   ============================================================ */

/* --- Stage trail: one connected chain --- */
.steps ol { counter-reset: stage; display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.steps li {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--r-sm);
  padding: 0.28rem 0.8rem 0.28rem 0.35rem;
  margin-right: 17px;
  font-size: 0.85rem; font-weight: 400; color: var(--ink-soft);
  counter-increment: stage;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.steps li::before {
  content: counter(stage);
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mist); color: var(--ink-soft);
  font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
/* The > that plugs this step into the next one. */
.steps li::after {
  content: ""; position: absolute;
  right: -13px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--border-strong);
  border-right: 2px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.steps li:last-child { margin-right: 0; }
.steps li:last-child::after { display: none; }
.steps li.done { border-color: var(--success); color: var(--success); }
.steps li.done::before { content: "\2713"; background: var(--success); color: #fff; }
.steps li.done::after { border-color: var(--success); }
.steps li.active {
  border-color: var(--sky); color: var(--ink); font-weight: 600;
  background: var(--sky-wash);
}
.steps li.active::before { background: var(--sky); color: #fff; }
.steps li.locked { opacity: 0.55; cursor: default; }
.steps li:not(.locked) { cursor: pointer; }
.steps li:not(.locked):hover { border-color: var(--sky); }
@media (prefers-reduced-motion: reduce) {
  .steps li, .steps li::before { transition: none; }
}

/* --- Clickable affordances --- */
#prospect-list li.pick { cursor: pointer; }
#prospect-list li.pick .pick-tick { cursor: default; }
#prospect-list li.pick .pick-tick input[type="checkbox"] { cursor: pointer; }
.draft-row { cursor: pointer; }

/* --- Home tabs: the count pill never clips out of the tab --- */
.tab { flex: 0 1 auto; padding: 0 8px 0 14px; gap: 8px; }
.tab .n { flex: 0 0 auto; line-height: 20px; margin-left: 2px; }

/* --- Running research phase: a pulsing dot, not just bold text --- */
.checklist li.active::before {
  border: 0; background: var(--success);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* --- Writing burst note keeps its dot aligned --- */
#drafts-note .hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Social profile links in the send cards --- */
.socials { margin-top: 0.7rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.social-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin: 0 8px 8px 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.social-link:hover { border-color: var(--sky); }
.social-ico svg { width: 15px; height: 15px; display: block; color: var(--sky); }