/* MarketIQ — one conversation at a time.
   Built for sales, not engineers: no dashboards, no jargon, no dense tables. A single
   opportunity fills the screen, the reply is directly editable, and there is exactly
   one obvious thing to do with it. */

:root {
  /* Native parts of controls (time picker icon, number spinners, select lists) follow
     this, not the colour tokens; it must switch with the theme. */
  color-scheme: light;
  --paper: #fbfaf8;
  --card: #ffffff;
  --sunk: #f5f3ef;
  --line: #e8e4dd;
  --line-soft: #f0ece5;
  --ink: #1c2530;
  --ink-2: #55616f;
  --ink-3: #8b95a3;

  /* from the hummingbird: deep navy -> teal -> green */
  --brand-1: #1b2a63;
  --brand-2: #1a9ab5;
  --brand-3: #17b877;
  --brand-grad: linear-gradient(115deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));

  --accent: #14807e;
  --accent-soft: #e6f4f1;
  --warn: #9a6a12;
  --warn-soft: #fdf4e3;
  --ok: #15804d;

  --reddit: #d94f22;
  --medium: #2f8f5b;
  --quora: #b3434f;

  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 37, 48, .04), 0 12px 32px -12px rgba(28, 37, 48, .12);
  --shadow-lift: 0 2px 4px rgba(28, 37, 48, .05), 0 20px 48px -16px rgba(28, 37, 48, .18);
  --serif: Fraunces, Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #12151a;
  --card: #191d24;
  --sunk: #1f242c;
  --line: #2a3039;
  --line-soft: #232831;
  --ink: #eceef2;
  --ink-2: #a7b0bc;
  --ink-3: #737d8a;
  --accent: #3fb8a6;
  --accent-soft: #16302f;
  --warn: #d9a441;
  --warn-soft: #2a2317;
  --ok: #3fbf7f;
  --reddit: #ff7a4d;
  --medium: #5cc98a;
  --quora: #d9737e;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.5);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 20px 48px -16px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
/* `hidden` is a UA style; any author display rule outranks it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .08s, box-shadow .16s, border-color .16s, background .16s;
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-grad);
  border: 0;
  color: #fff;
  box-shadow: 0 1px 2px rgba(27,42,99,.2), 0 10px 24px -10px rgba(26,154,181,.6);
}
.btn-primary:hover { box-shadow: var(--shadow-lift); }

.btn-hero { font-size: 16.5px; font-weight: 600; padding: 15px 40px; border-radius: 13px; }
.btn-lg { padding: 13px 20px; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-wide { width: 100%; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sunk); border-color: transparent; color: var(--ink); }
.btn-quiet { background: transparent; }
a.btn { text-decoration: none; }
.btn.is-copied { background: var(--ok); box-shadow: none; }

.icon-btn {
  font: inherit; font-size: 16px; line-height: 1;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--sunk); color: var(--ink); }

.ghost-btn {
  font: inherit; font-size: 13.5px; font-weight: 500;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); border-radius: 8px; padding: 5px 11px; cursor: pointer;
}
.ghost-btn:hover { color: var(--ink); border-color: var(--ink-3); }

/* ── sign in ─────────────────────────────────────────────────────────────── */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 44px 36px; box-shadow: var(--shadow);
}
.gate-logo { margin-bottom: 18px; }
.gate-title { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.gate-sub { color: var(--ink-2); font-size: 15px; margin: 8px 0 26px; }
.gate-note { color: var(--ink-3); font-size: 13px; margin: 16px 0 0; }
.gate-deny { color: var(--warn); font-size: 14px; margin: 18px 0 14px; line-height: 1.55; }

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px; max-width: 1040px; margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.campaign-pick {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 0; border-radius: 999px;
  padding: 4px 22px 4px 10px; margin-left: 2px; cursor: pointer; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 12px) 53%, calc(100% - 8px) 53%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.campaign-pick:hover { filter: brightness(.96); }

.topic-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.topic-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; cursor: pointer; background: var(--paper);
}
.topic-row:hover { border-color: var(--ink-3); }
.topic-row.is-active { border-color: var(--accent); background: var(--accent-soft); }
.topic-row-role { color: var(--ink-3); font-size: 12.5px; margin-left: auto; }

/* Settings -> Topics hands off to the Campaigns page. */
.sheet-link {
  display: inline-block; font-size: 14px; font-weight: 500;
  color: var(--accent); text-decoration: none; padding: 4px 0;
}
.sheet-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.campaign-tag {
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 3px 9px; border-radius: 999px; margin-left: 2px;
}

.topbar-mid { flex: 1 1 auto; display: flex; justify-content: center; }
.topbar-actions { display: flex; align-items: center; gap: 4px; flex: none; }

/* A text link that sits in the top bar beside the icon buttons. */
.topbar-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px;
}
.topbar-link:hover { background: var(--sunk); color: var(--ink); }

.week-select {
  font: inherit; font-size: 14.5px; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
}
.week-select:hover { border-color: var(--ink-3); color: var(--ink); }

/* ── stage ───────────────────────────────────────────────────────────────── */

.stage { max-width: 780px; margin: 0 auto; padding: 8px 24px 40px; }

.focus { animation: rise .32s cubic-bezier(.2,.9,.3,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.focus-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500;
  padding: 5px 13px; border-radius: 999px;
  background: var(--sunk); color: var(--ink-2);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip[data-p="Reddit"] { color: var(--reddit); }
.chip[data-p="Medium"] { color: var(--medium); }
.chip[data-p="Quora"]  { color: var(--quora); }

/* The coloured pill is a real <select>: same look, but you can narrow from it. */
.chip-select {
  position: relative; display: inline-flex; align-items: center;
  background: var(--sunk); border-radius: 999px; padding: 0 10px 0 13px;
  color: var(--ink-2);
}
.chip-select::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none; margin-right: 7px;
}
.chip-select[data-p="Reddit"] { color: var(--reddit); }
.chip-select[data-p="Medium"] { color: var(--medium); }
.chip-select[data-p="Quora"]  { color: var(--quora); }

.chip-select select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: currentColor; background: transparent; border: 0;
  padding: 5px 20px 5px 0; cursor: pointer; outline: none;
}
/* The caret is drawn on the wrapper so it inherits the platform colour. */
.chip-select::after {
  content: ""; position: absolute; right: 11px; top: 50%;
  width: 6px; height: 6px; margin-top: -4px; pointer-events: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
/* No platform selected: neutral pill, so the colour never contradicts the words. */
.chip-select:not([data-p]), .chip-select[data-p=""] { color: var(--ink-2); }
.chip-select:hover { filter: brightness(.94); }

.type-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13.5px; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 28px 5px 13px; cursor: pointer; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.type-select:hover { border-color: var(--ink-3); color: var(--ink); }

.focus-status { font-size: 13.5px; color: var(--ink-3); }
.focus-link { margin-left: auto; font-size: 14px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.focus-link:hover { text-decoration: underline; }

.focus-question {
  font-family: var(--serif);
  font-size: clamp(25px, 3.6vw, 34px);
  font-weight: 600; line-height: 1.24; letter-spacing: -.015em;
  margin: 0 0 16px;
}

.context-toggle {
  font: inherit; font-size: 14px; color: var(--ink-3);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.context-toggle:hover { color: var(--ink-2); }

.focus-context {
  margin: 12px 0 0;
  padding: 16px 18px;
  background: var(--sunk);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 15px; line-height: 1.65;
  max-height: 260px; overflow-y: auto;
}

/* reply — the thing they actually use --------------------------------------- */

.reply {
  margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.reply:focus-within { border-color: var(--accent); box-shadow: var(--shadow-lift); }

.reply-top {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
}
.reply-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.reply-edited {
  font-size: 12px; color: var(--accent);
  background: var(--accent-soft); padding: 2px 9px; border-radius: 999px;
}
.reply-tools { margin-left: auto; display: flex; gap: 6px; }

.reply-body {
  padding: 22px 24px;
  font-size: 16.5px; line-height: 1.75;
  white-space: pre-wrap; word-wrap: break-word;
  outline: none; min-height: 170px;
  caret-color: var(--accent);
}
.reply-body:focus { background: linear-gradient(var(--card), var(--card)) padding-box; }

/* Links inside the reply are real anchors, not raw "[label](url)" markdown. */
.reply-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.reply-body a:hover { text-decoration-thickness: 2px; }

.reply-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; border-top: 1px solid var(--line-soft);
  background: var(--sunk);
  font-size: 13px; color: var(--ink-3);
}
.reply-tip { font-style: italic; }

.reviewer-note {
  margin-top: 16px; padding: 14px 18px;
  background: var(--warn-soft); border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
.reviewer-note strong { color: var(--warn); display: block; margin-bottom: 3px; font-size: 13.5px; }

/* actions ------------------------------------------------------------------- */

.actions {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}

.done-toggle {
  display: block; margin: 16px auto 0;
  font: inherit; font-size: 14px; color: var(--ink-3);
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
}
.done-toggle:hover { color: var(--ink); background: var(--sunk); }
.done-toggle.is-done { color: var(--ok); font-weight: 500; }

/* empty --------------------------------------------------------------------- */

.focus-empty { text-align: center; padding: 70px 20px; }
.focus-empty img { opacity: .2; }
.focus-empty h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 16px 0 6px; }
.focus-empty p { color: var(--ink-2); margin: 0; }

/* filmstrip ----------------------------------------------------------------- */

.strip {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center;
}

.pip {
  width: 34px; height: 5px; border-radius: 3px;
  background: var(--line); border: 0; padding: 0; cursor: pointer;
  transition: background .18s, transform .18s;
}
.pip:hover { transform: scaleY(1.9); }
.pip.is-done { background: var(--ok); opacity: .55; }
.pip.is-current { background: var(--brand-2); transform: scaleY(2.1); }

.strip-count { text-align: center; color: var(--ink-3); font-size: 13.5px; margin: 14px 0 0; }

/* ── settings sheet ──────────────────────────────────────────────────────── */

.sheet-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 26, 34, .38);
  display: flex; justify-content: flex-end;
  backdrop-filter: blur(2px);
}
.sheet {
  width: min(420px, 100%); height: 100%;
  background: var(--card); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  animation: slide .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes slide { from { transform: translateX(100%); } to { transform: none; } }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--line-soft);
}
.sheet-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; }
.sheet-body { padding: 8px 22px 28px; overflow-y: auto; }

.sheet-section { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.sheet-section:last-child { border-bottom: 0; }
.sheet-section h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.sheet-hint { color: var(--ink-3); font-size: 13.5px; margin: 0 0 16px; line-height: 1.5; }

.field { display: block; margin-bottom: 14px; }
.field > span, .field > label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 14.5px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-note { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }

.server-state {
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-sm); padding: 10px 13px;
  font-size: 13.5px; line-height: 1.5; margin: 0 0 14px;
}
.own-key summary {
  cursor: pointer; font-size: 13.5px; color: var(--ink-3);
  padding: 4px 0; list-style: none; margin-bottom: 8px;
}
.own-key summary::-webkit-details-marker { display: none; }
.own-key summary::before { content: "\25b8  "; }
.own-key[open] summary::before { content: "\25be  "; }
.own-key summary:hover { color: var(--ink-2); }

.sheet-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sheet-status { font-size: 13px; color: var(--accent); margin: 10px 0 0; min-height: 18px; }

/* ── toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(150%);
  background: var(--ink); color: var(--paper);
  padding: 12px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500;
  opacity: 0; pointer-events: none; z-index: 80;
  box-shadow: var(--shadow-lift);
  transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .topbar-mid { order: 3; width: 100%; justify-content: flex-start; }
  .topbar-actions { margin-left: auto; }
  .stage { padding: 4px 16px 32px; }
  .reply-body { padding: 18px; font-size: 16px; }
  .actions { flex-direction: column-reverse; }
  .actions .btn { width: 100%; }
  .btn-hero { padding: 15px 24px; }
  .focus-link { margin-left: 0; width: 100%; }
  .pip { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* campaigns page ─────────────────────────────────────────────────────────── */
/* campaigns.html: a working page for the few people who set topics up. Same paper,
   cards, type and buttons as the conversations screen, so moving between the two feels
   like one product. Everything here is prefixed cp- so it cannot leak into index.html. */

.cp-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cp-topbar-mid { justify-content: flex-start; }

.cp-stage { max-width: 1040px; margin: 0 auto; padding: 4px 24px 64px; }

.cp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 10px 0 22px;
}
.cp-title {
  font-family: var(--serif); font-size: clamp(28px, 3.6vw, 36px); font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; margin: 0;
}
.cp-lede { color: var(--ink-2); font-size: 15px; margin: 6px 0 0; max-width: 540px; }

.cp-mode {
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 13.5px; line-height: 1.5; margin: 0 0 18px;
}

.cp-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  background: var(--warn-soft); border-radius: var(--r-sm);
  padding: 14px 18px; margin: 0 0 20px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.cp-notice-words { flex: 1 1 260px; min-width: 0; }
.cp-notice strong { display: block; color: var(--warn); font-size: 14px; margin-bottom: 2px; }

.cp-layout {
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.cp-list { min-width: 0; }
.cp-loading { color: var(--ink-3); font-size: 14.5px; margin: 6px 0 0; }

/* cards --------------------------------------------------------------------- */

.cp-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cp-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.cp-card:hover { border-color: var(--ink-3); }
.cp-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }

.cp-card-main {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; background: transparent; border: 0;
  padding: 16px 18px 12px; cursor: pointer;
}
.cp-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r); }
.cp-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cp-card-label {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere;
}
.cp-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); background: var(--sunk); padding: 2px 8px; border-radius: 999px;
}
.cp-card-role { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 1px; }
.cp-card-lines {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.cp-line { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.cp-line-schedule { font-weight: 500; color: var(--ink); }
.cp-line.is-muted { color: var(--ink-3); }
.cp-line.is-warn { color: var(--warn); }
.cp-line.is-running { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; }
.cp-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-card-foot { display: flex; justify-content: flex-end; padding: 0 14px 14px; }

.cp-run-btn { color: var(--accent); font-weight: 600; }
.cp-run-btn:hover { border-color: var(--accent); }
.cp-run-btn.is-running { color: var(--ink-2); font-weight: 500; }

.cp-spinner {
  flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: cp-spin .8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* detail -------------------------------------------------------------------- */

.cp-detail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cp-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-detail-heading { min-width: 0; }
.cp-detail-head h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.2; margin: 0; outline: none; overflow-wrap: anywhere;
}
.cp-detail-meta { color: var(--ink-3); font-size: 13.5px; margin: 4px 0 0; }

.cp-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 20px 24px; min-width: 0;
}
.cp-panel h3, .cp-section h3 { font-size: 15px; font-weight: 600; margin: 0; }
.cp-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px;
}
.cp-schedule-summary { margin: 0; font-size: 14px; color: var(--ink-2); }
.cp-schedule-hint { color: var(--ink-3); font-size: 14px; margin: 0; }
.cp-inline-note {
  background: var(--sunk); color: var(--ink-2); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 13.5px; line-height: 1.5; margin: 0 0 14px;
}

/* A fieldset used only so one `disabled` switches a whole form to read-only. */
.cp-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.cp-plain:disabled .field input,
.cp-plain:disabled .field select,
.cp-plain:disabled .field textarea { background: var(--sunk); color: var(--ink-2); cursor: default; }

.cp-section { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.cp-section:first-child { padding-top: 0; border-top: 0; }
.cp-section h3 { margin-bottom: 12px; }
.cp-section-hint { color: var(--ink-3); font-size: 13px; margin: -4px 0 12px; }
.cp-section-hint:last-child { margin: -2px 0 0; }

.field textarea { line-height: 1.5; resize: vertical; min-height: 64px; }
.field [aria-invalid="true"] { border-color: var(--warn); }

.cp-more summary {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.cp-more summary::-webkit-details-marker { display: none; }
.cp-more summary::before {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .16s;
}
.cp-more[open] summary { margin-bottom: 12px; }
.cp-more[open] summary::before { transform: rotate(45deg); }
.cp-more:last-of-type { padding-bottom: 0; }

.cp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.cp-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* checkbox groups ----------------------------------------------------------- */

.cp-group { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.cp-group legend { padding: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 8px; }

.cp-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-size: 14px; cursor: pointer;
}
.cp-check:hover { border-color: var(--ink-3); }
.cp-check input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.cp-days { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-day { position: relative; display: inline-flex; }
/* The real checkbox sits invisibly on top of the pill, so it stays clickable,
   focusable and announced; the pill only draws its state. */
.cp-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cp-day span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); background: var(--paper);
  transition: background .16s, border-color .16s, color .16s;
}
.cp-day:hover span { border-color: var(--ink-3); }
.cp-day input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.cp-day input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-day input:disabled { cursor: default; }
.cp-day input:disabled + span { opacity: .65; }

.cp-group.is-invalid .cp-check,
.cp-group.is-invalid .cp-day span { border-color: var(--warn); }

.cp-switch {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 500; cursor: pointer; margin-bottom: 16px;
}
.cp-switch input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 40px; height: 24px; margin: 0; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: background .16s;
}
.cp-switch input::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .16s;
}
.cp-switch input:checked { background: var(--accent); }
.cp-switch input:checked::before { transform: translateX(16px); }
.cp-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-switch input:disabled { opacity: .6; cursor: default; }

/* errors and actions -------------------------------------------------------- */

.cp-err { display: block; color: var(--warn); font-size: 12.5px; font-weight: 500; line-height: 1.45; margin-top: 6px; }
.cp-form-error {
  background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 13.5px; line-height: 1.5; margin: 14px 0 0;
}
.cp-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.cp-form-status { margin: 0; font-size: 13.5px; color: var(--accent); min-width: 0; }
.cp-delete { margin-left: auto; color: var(--warn); }
.cp-delete:hover { color: var(--warn); background: var(--warn-soft); }

/* run dialog ---------------------------------------------------------------- */

.cp-dialog {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift);
  overflow: auto;
}
.cp-dialog::backdrop { background: rgba(20, 26, 34, .38); backdrop-filter: blur(2px); }
dialog.cp-dialog:not([open]) { display: none; }
/* Browsers without showModal(): pin it to the middle of the screen instead. */
.cp-dialog.is-fallback { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 60; }

.cp-dialog-body { margin: 0; padding: 22px 24px 20px; }
.cp-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cp-dialog-head h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.25; margin: 0; overflow-wrap: anywhere;
}
.cp-dialog-head .icon-btn { flex: none; margin: -6px -8px 0 0; }
.cp-note { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; margin: 4px 0 0; }
.cp-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.cp-progress {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: var(--sunk); border-radius: var(--r-sm);
}
.cp-progress .cp-spinner { margin-top: 4px; }
.cp-progress-state { margin: 0; font-size: 15px; font-weight: 600; }
.cp-progress-sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.cp-warnings { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cp-warnings li + li { margin-top: 4px; }
#run-progress .cp-note { margin-top: 12px; }

/* campaigns page: narrow screens -------------------------------------------- */

@media (max-width: 819px) {
  .cp-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .cp-stage { padding: 4px 16px 48px; }
  .cp-panel { padding: 18px 16px; }
  .cp-dialog-body { padding: 20px 18px 18px; }
}

@media (max-width: 560px) {
  .cp-row, .cp-row-3 { grid-template-columns: minmax(0, 1fr); }
  /* Seven equal pills on one line rather than a ragged wrap. */
  .cp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cp-day span { width: 100%; min-width: 0; padding: 7px 0; font-size: 13.5px; }
  .cp-head > .btn { width: 100%; }
}