/* The campaigns page and the campaign report (docs/UI-REDESIGN-PLAN.md step 2,
   pass 2). The page frame, table, tiles and overlays come from rl-ui.css and
   rl-page.css; only what is this page's own lives here.
   rl-cm-* = the list · rl-cr-* = the report. */

/* ── the list ─────────────────────────────────────────────────────────────── */
/* Campaign Copilot, in one line. The old page gave this a 260px hero with
   three floating cards; it says the same thing in 68px. The only motion is a
   slow breath on the mark — a spinning ring and stepping chips read as noise
   (owner, 2026-09-20). */

.rlx .rl-cm-bar{flex:none;display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.rlx .rl-cm-bar .rl-seg{flex:none;width:232px}
.rlx .rl-cm-bar .rl-search{flex:1 1 240px;min-width:170px;max-width:360px}
.rlx .rl-cm-bar .grow{flex:1}
.rlx .rl-cm-new{display:none}   /* the phone's own New button, beside the tabs */

.rlx .rl-cm-sum{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.rlx .rl-cm-tile{padding:12px 14px;border-radius:var(--rl-r12);background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line);min-width:0}
.rlx .rl-cm-tile span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rl-ink3)}
.rlx .rl-cm-tile b{display:block;margin-top:5px;font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rl-ink)}
.rlx .rl-cm-tile em{font-style:normal;font-size:11.5px;color:var(--rl-ink3)}
.rlx .rl-cm-tile.is-bad b{color:var(--rl-danger)}
.rlx .rl-cm-tile.is-good b{color:var(--rl-ok)}

.rlx .rl-cm-nm{display:flex;align-items:center;gap:10px;min-width:0}
.rlx .rl-cm-nm .rl-tile{width:34px;height:34px;border-radius:10px}
.rlx .rl-cm-nm>div{min-width:0}
.rlx .rl-cm-nm>div b{display:block;font-size:13.5px;font-weight:700;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Scoped to the text block: a bare `.rl-cm-nm span` also matches the tile,
   which is a <span>, and flattening its grid drops the icon to the top. */
.rlx .rl-cm-nm>div span{display:block;font-size:11.5px;color:var(--rl-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .rl-cm-table td:first-child{max-width:0;width:38%}
.rlx .rl-cm-when{font-size:12.5px;color:var(--rl-ink2);white-space:nowrap}
.rlx .rl-cm-when em{display:block;font-style:normal;font-size:11.5px;color:var(--rl-ink3)}
.rlx .rl-cm-when.is-soon{color:var(--rl-acc2);font-weight:600}
.rlx .rl-cm-n{font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;color:var(--rl-ink)}
.rlx .rl-cm-n small{display:block;font-size:11px;font-weight:500;color:var(--rl-ink3)}
.rlx .rl-cm-n.is-bad{color:var(--rl-danger)}
.rlx .rl-cm-n.is-zero{color:var(--rl-ink3);font-weight:500}

/* the twin bar: how much was delivered, how much was read */
.rlx .rl-cm-res{display:flex;flex-direction:column;gap:5px;min-width:96px}
.rlx .rl-cm-res .r{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--rl-ink3)}
.rlx .rl-cm-res .r i{flex:1;height:4px;border-radius:4px;background:var(--rl-surface3);overflow:hidden}
.rlx .rl-cm-res .r i b{display:block;height:100%;border-radius:4px;background:var(--c,var(--rl-ok))}
.rlx .rl-cm-res .r span{font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.rlx .rl-cm-prog{display:flex;align-items:center;gap:8px;min-width:96px;font-size:11.5px;color:var(--rl-ink3)}
.rlx .rl-cm-prog i{flex:1;height:5px;border-radius:5px;background:var(--rl-surface3);overflow:hidden}
.rlx .rl-cm-prog i b{display:block;height:100%;background:var(--rl-acc);border-radius:5px;transition:width .4s}
.rlx .rl-cm-acts{display:flex;align-items:center;gap:6px;justify-content:flex-end}

/* one card per campaign on a phone */
.rlx .rl-cm-card{display:none}
.rlx .rl-cm-err{margin:14px;padding:14px;border-radius:var(--rl-r12);background:color-mix(in srgb,var(--rl-danger) 7%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-danger) 30%,transparent);font-size:13px;color:var(--rl-ink2)}

/* ── the report ───────────────────────────────────────────────────────────── */
.rlx .rl-cr-body{flex:1;min-height:0;overflow:auto;padding:20px}
/* The table folds a column at a time rather than scrolling sideways: a list
   that has to be dragged left and right is not a list you can read. Order of
   loss: when → the delivered/read bars → the audience size. */
@media (max-width:1180px){.rlx .rl-cm-table th:nth-child(7),.rlx .rl-cm-table td:nth-child(7){display:none}}
@media (max-width:1040px){.rlx .rl-cm-table th:nth-child(6),.rlx .rl-cm-table td:nth-child(6){display:none}}
@media (max-width:930px){.rlx .rl-cm-table th:nth-child(3),.rlx .rl-cm-table td:nth-child(3){display:none}}
@media (max-width:860px){
  /* Skipped folds away first; Failed is the one nobody should have to scroll for. */
  .rlx .rl-cm-sum{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rlx .rl-cm-sum .rl-cm-tile:nth-child(n+5){display:none}
}
/* Below this a row cannot hold its shape, so each campaign becomes a card. */
@media (max-width:860px){
  .rlx .rl-cm-table{display:none}
  .rlx .rl-cm-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-bottom:1px solid #f0f1f5}
  .rlx .rl-cm-card .t{flex:1;min-width:0}
  .rlx .rl-cm-card .t b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rlx .rl-cm-card .t span{display:block;font-size:12px;color:var(--rl-ink3);margin-top:3px}
  .rlx .rl-cm-card .t span .bad{color:var(--rl-danger);font-weight:600}
  .rlx .rl-cm-card:hover{background:#fafbfc}
}
@media (max-width:760px){
  .rlx .rl-cm-bar{gap:8px}
  .rlx .rl-cm-bar .rl-seg{order:-1;width:100%}
  .rlx .rl-cm-bar .rl-search{flex:1 1 auto;max-width:none}
  .rlx .rl-cm-bar .rl-search input{font-size:16px!important}
  .rlx .rl-cm-bar .rl-hide-ph{display:none!important}
  /* The block above the list has to stay about a quarter of the screen, or
     the campaigns themselves are below the fold (owner, 2026-09-20). */
  /* THE LIST IS THE PAGE. Everything above it — the title, the Copilot strip,
     the filters, the stats — used to be pinned, so two thirds of a phone was
     chrome and the campaigns sat in a 250px window (owner, 2026-09-20). The
     page scrolls as one now, and the block above is trimmed to about a third
     so the first campaigns are visible before any scrolling at all. */
  #page-bulk.rlx.rl-page{height:auto;min-height:calc(100dvh - 61px - var(--rl-tabbar-h,59px) - var(--rl-banner-h,0px));overflow:auto;-webkit-overflow-scrolling:touch}
  #page-bulk .rl-board{overflow:visible}
  #page-bulk .rl-res,#page-bulk .rl-res-body,#page-bulk .rl-res-ft{overflow:visible;min-height:0}
  #page-bulk .rl-pg-hd{display:none}
  /* This page scrolls as a document rather than inside itself, so its own
     bottom padding is what keeps the last row clear of the app's tab bar. */
  #page-bulk.rlx.rl-page{padding:12px 12px calc(var(--rl-tabbar-h,59px) + 12px)}
  /* two rows, not four: the tabs, the status and New share the first one. */
  .rlx .rl-cm-new{display:inline-flex;order:2;flex:none}
  .rlx .rl-cm-bar{gap:7px}
  .rlx .rl-cm-bar .grow{display:none}
  .rlx .rl-cm-bar .rl-seg{order:0;flex:1 1 auto;width:auto}
  .rlx .rl-cm-bar select[data-status]{order:1;flex:0 0 116px}
  .rlx .rl-cm-bar .rl-search{order:3;flex:1 1 100%}
  /* the four stats as one strip, not four cards */
  .rlx .rl-cm-sum{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:10px;padding:5px 0;border-radius:var(--rl-r12);background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line)}
  .rlx .rl-cm-tile{display:flex;align-items:baseline;justify-content:center;gap:5px;padding:2px 4px;background:none;box-shadow:none;border-right:1px solid var(--rl-line)}
  .rlx .rl-cm-tile:last-child{border-right:0}
  .rlx .rl-cm-tile span{font-size:9.5px;letter-spacing:.04em}
  .rlx .rl-cm-tile b{font-size:15px;margin:0}
  .rlx .rl-cm-tile em{display:none}
  .rlx .rl-pg-hd{margin-bottom:10px}
  .rlx .rl-cm-bar{margin-bottom:10px}
  .rlx .rl-cr-body{padding:14px 12px calc(20px + env(safe-area-inset-bottom))}
}

/* the stop window, after a launch — it outlives the builder, so it lives here */
.rlx-grace{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2400;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 24px));padding:12px 14px 12px 16px;border-radius:16px;color:#fff;background:linear-gradient(180deg,#262b38,#12151c);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 48px -16px rgba(16,24,40,.55);font-family:inherit;animation:rlGraceIn .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes rlGraceIn{from{opacity:0;transform:translate(-50%,16px)}}
.rlx-grace .n{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;background:conic-gradient(var(--rl-acc,#f15b41) calc(var(--p,100) * 1%),rgba(255,255,255,.14) 0)}
.rlx-grace .n span{width:34px;height:34px;border-radius:50%;background:#171a22;display:grid;place-items:center}
.rlx-grace .t{flex:1;min-width:0}
.rlx-grace .t b{display:block;font-size:13.5px;font-weight:700}
.rlx-grace .t span{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx-grace button{flex:none;height:34px;padding:0 13px;border:0;border-radius:10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:#fff;color:#12151c}
.rlx-grace button.x{width:30px;padding:0;background:rgba(255,255,255,.1);color:#fff;font-size:16px;font-weight:500}
.rlx-grace button:hover{opacity:.9}
.rlx-grace.is-go{background:linear-gradient(180deg,#1d3326,#12211a)}
@media (max-width:760px){.rlx-grace{left:12px;right:12px;bottom:76px;transform:none;max-width:none}@keyframes rlGraceIn{from{opacity:0;transform:translateY(16px)}}}