/* The campaign report (docs/CAMPAIGN-REPORT-PLAN.md): did this campaign do its
   job, where did it leak, what next. The page frame, cards, tables and
   overlays come from rl-ui.css; only what the report is lives here. rp-*. */
.rlx.rl-rp{height:100%;display:flex;flex-direction:column;background:var(--rl-bg)}

/* head: name, state, the facts about the send, and the three tabs */
.rlx .rp-top{flex:none;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--rl-line);box-shadow:0 10px 24px -22px rgba(16,24,40,.45)}
.rlx .rp-hd{display:flex;align-items:center;gap:12px;padding:12px 20px 0}
.rlx .rp-hd .t{min-width:0}
.rlx .rp-hd .t small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rl-ink3)}
.rlx .rp-hd .t b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .rp-hd .acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.rlx .rp-meta{display:flex;gap:4px 16px;flex-wrap:wrap;padding:6px 20px 0 64px;font-size:12.5px;color:var(--rl-ink3)}
.rlx .rp-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.rlx .rp-meta b{color:var(--rl-ink2);font-weight:600}
.rlx .rp-tabs{display:flex;gap:2px;padding:8px 20px 0 60px}
.rlx .rp-tabs button{position:relative;flex:none;white-space:nowrap;height:38px;padding:0 12px;font-size:13px;font-weight:600;color:var(--rl-ink3);display:inline-flex;align-items:center;gap:7px}
.rlx .rp-tabs button i{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--rl-surface3);color:var(--rl-ink2)}
.rlx .rp-tabs button:hover{color:var(--rl-ink2)}
.rlx .rp-tabs button.is-on{color:var(--rl-ink)}
.rlx .rp-tabs button.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--rl-acc)}

.rlx .rp-body{flex:1;min-height:0;overflow:auto;padding:20px}
.rlx .rp-col{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.rlx .rp-card{border:1px solid var(--rl-line);border-radius:var(--rl-r16);background:#fff;box-shadow:var(--rl-sh-sm);padding:18px;min-width:0}
.rlx .rp-card>h3{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--rl-ink)}
.rlx .rp-card>h3 .r{margin-left:auto;font-size:12px;font-weight:600;color:var(--rl-ink3);display:inline-flex;align-items:center;gap:8px}
.rlx .rp-card>p{font-size:12.5px;line-height:1.5;color:var(--rl-ink3);margin:3px 0 14px}
.rlx .rp-2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
.rlx .rp-2e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.rlx .rp-quiet{font-size:12.5px;color:var(--rl-ink3);line-height:1.5}
.rlx .rp-note{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;border-radius:var(--rl-r12);background:var(--rl-surface2);font-size:12.5px;line-height:1.55;color:var(--rl-ink2)}
.rlx .rp-note b{color:var(--rl-ink)}
.rlx .rp-note>.rl-ic{flex:none;margin-top:2px;color:var(--rl-ink3)}

/* the verdict */
.rlx .rp-verdict{display:flex;gap:18px;align-items:flex-start;border-radius:var(--rl-r16);padding:20px;color:#e8ebf2;background:radial-gradient(120% 160% at 0% 0%,#2a2033 0%,#14161e 46%,#0f1116 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--rl-sh-md)}
.rlx .rp-grade{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.rlx .rp-verdict .t{flex:1;min-width:0}
.rlx .rp-verdict .lb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(232,235,242,.5)}
.rlx .rp-verdict h2{margin:5px 0 7px;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.35;color:#fff}
.rlx .rp-verdict p{margin:0;font-size:13.5px;line-height:1.65;color:rgba(232,235,242,.76);max-width:780px}
.rlx .rp-verdict p b{color:#fff;font-weight:600}
.rlx .rp-goal{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.rlx .rp-goal:hover{background:rgba(255,255,255,.18)}
.rlx .rp-verdict .ask{flex:none;align-self:center}
.rlx .rp-ans{margin-top:14px;padding:13px 15px;border-radius:var(--rl-r12);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}

/* the four numbers */
.rlx .rp-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rlx .rp-kpi{border:1px solid var(--rl-line);border-radius:var(--rl-r16);background:#fff;box-shadow:var(--rl-sh-sm);padding:15px 16px;min-width:0}
.rlx .rp-kpi.is-goal{box-shadow:inset 0 0 0 1.5px var(--rl-acc),var(--rl-sh-sm);border-color:transparent}
.rlx .rp-kpi .k{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--rl-ink3)}
.rlx .rp-kpi .k em{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rl-acc2)}
.rlx .rp-kpi .v{display:flex;align-items:baseline;gap:8px;margin-top:7px;min-width:0}
.rlx .rp-kpi .v b{font-size:27px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--rl-ink)}
.rlx .rp-kpi .v span{font-size:12.5px;color:var(--rl-ink3);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rp-kpi .d{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--rl-ink3);min-height:22px}
.rlx .rp-kpi .d span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rp-kpi svg.sp{margin-left:auto;flex:none}
.rlx .rp-delta{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--c);background:color-mix(in srgb,var(--c) 11%,#fff)}

/* the funnel, with what was lost between the steps */
.rlx .rp-fun .s{display:grid;grid-template-columns:78px minmax(0,1fr) 88px;gap:12px;align-items:center;font-size:12.5px}
.rlx .rp-fun .s .lb{font-weight:600;color:var(--rl-ink2)}
.rlx .rp-fun .s .track{height:24px;border-radius:7px;background:var(--rl-surface3);overflow:hidden}
.rlx .rp-fun .s .track i{display:block;height:100%;border-radius:7px;background:var(--rl-acc);opacity:var(--o,1);transition:width .5s var(--rl-ease)}
.rlx .rp-fun .s .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--rl-ink3)}
.rlx .rp-fun .s .v b{color:var(--rl-ink);font-weight:700;font-size:13.5px}
.rlx .rp-fun .gap{display:grid;grid-template-columns:78px minmax(0,1fr) 88px;gap:12px;align-items:center;min-height:24px;font-size:11.5px;color:var(--rl-ink3)}
.rlx .rp-fun .gap span{grid-column:2;display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--rl-line);margin-left:2px}
.rlx .rp-fun .gap.is-big span{color:var(--rl-ink2);font-weight:600}

/* step by step against your usual */
.rlx .rp-keep{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.rlx .rp-keep th{text-align:right;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rl-ink3);padding:0 0 9px}
.rlx .rp-keep th:first-child,.rlx .rp-keep td:first-child{text-align:left}
.rlx .rp-keep td{padding:10px 0;border-top:1px solid #f0f1f5;text-align:right;color:var(--rl-ink2)}
.rlx .rp-keep td:first-child{font-weight:600;color:var(--rl-ink)}
.rlx .rp-keep td b{color:var(--rl-ink);font-weight:700}

/* what to do next */
.rlx .rp-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rlx .rp-act{display:flex;flex-direction:column;gap:9px;padding:15px;border-radius:var(--rl-r12);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .rp-act.is-first{background:#fff;box-shadow:inset 0 0 0 1.5px var(--rl-acc),var(--rl-sh-sm)}
.rlx .rp-act .h{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rl-ink3)}
.rlx .rp-act b{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.rlx .rp-act p{margin:0;font-size:12.5px;line-height:1.5;color:var(--rl-ink3);flex:1}
.rlx .rp-act .exp{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--rl-ink2);padding-top:9px;border-top:1px solid var(--rl-line)}
.rlx .rp-act .exp b{font-size:12px;font-weight:700}
.rlx .rp-conf{display:inline-flex;gap:2px;margin-left:auto}
.rlx .rp-conf i{width:5px;height:12px;border-radius:2px;background:var(--rl-surface3)}
.rlx .rp-conf i.on{background:var(--rl-ink3)}

/* timing */
.rlx .rp-hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;margin-top:4px}
.rlx .rp-hours i{display:block;height:34px;border-radius:5px;background:color-mix(in srgb,var(--rl-acc) calc(var(--v) * 1%),var(--rl-surface3))}
.rlx .rp-hours i.is-send{box-shadow:0 0 0 2px var(--rl-ink)}
.rlx .rp-hax{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;margin-top:6px;font-size:10.5px;color:var(--rl-ink3);font-variant-numeric:tabular-nums}
.rlx .rp-hax span{text-align:center}
.rlx .rp-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--rl-ink3)}
.rlx .rp-legend span{display:inline-flex;align-items:center;gap:6px}
.rlx .rp-legend i{display:inline-block;width:14px;height:3px;border-radius:3px;background:var(--c)}
.rlx .rp-legend i.box{width:11px;height:11px;border-radius:3px;box-shadow:0 0 0 2px var(--rl-ink);background:none}

/* who responded best */
.rlx .rp-split{width:100%;border-collapse:collapse;font-size:12.5px}
.rlx .rp-split th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rl-ink3);text-align:left;padding:0 0 9px}
.rlx .rp-split th:last-child{text-align:right}
.rlx .rp-split td{padding:9px 0;border-top:1px solid #f0f1f5;vertical-align:middle}
.rlx .rp-split td.k{max-width:0;width:34%;font-weight:600;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rp-split td.n{width:56px;color:var(--rl-ink3);font-variant-numeric:tabular-nums}
.rlx .rp-split td.a{width:62px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--rl-ink)}
.rlx .rp-split .b{display:flex;align-items:center;gap:9px}
.rlx .rp-split .b i{flex:1;height:7px;border-radius:7px;background:var(--rl-surface3);overflow:hidden}
.rlx .rp-split .b i u{display:block;height:100%;border-radius:7px;background:var(--rl-acc);text-decoration:none}
.rlx .rp-split .b span{width:38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--rl-ink2);font-weight:600}
.rlx .rp-split tr.is-thin td,.rlx .rp-split tr.is-thin .b span{color:var(--rl-ink4);font-weight:500}
.rlx .rp-split tr.is-thin .b i u{background:var(--rl-ink4)}

/* replies, buttons, delivery health */
.rlx .rp-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #f0f1f5;font-size:12.5px}
.rlx .rp-row:first-of-type{border-top:0}
.rlx .rp-row .t{flex:1;min-width:0}
.rlx .rp-row .t b{display:block;font-weight:600;color:var(--rl-ink)}
.rlx .rp-row .t span{display:block;color:var(--rl-ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rp-row em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:var(--rl-ink);white-space:nowrap}
.rlx .rp-bar{display:block;width:100%;text-align:left;padding:10px 0;border-top:1px solid #f0f1f5}
.rlx .rp-bar:first-of-type{border-top:0}
.rlx .rp-bar .l{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-bottom:7px}
.rlx .rp-bar .l b{font-weight:600;color:var(--rl-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .rp-bar .l span{margin-left:auto;color:var(--rl-ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rlx .rp-bar i{display:block;height:7px;border-radius:7px;background:var(--rl-surface3);overflow:hidden}
.rlx .rp-bar i u{display:block;height:100%;border-radius:7px;background:var(--c,var(--rl-acc));min-width:3px;text-decoration:none}
.rlx button.rp-bar:hover .l b{color:var(--rl-acc2)}
.rlx .rp-bar .l b .rl-ic{display:inline-block;vertical-align:-2px;margin-right:6px;color:var(--rl-info)}
.rlx button.rp-bar:disabled{cursor:default}
.rlx button.rp-bar:disabled:hover .l b{color:var(--rl-ink)}
/* A link button whose taps cannot be counted: said plainly, not drawn as zero. */
.rlx .rp-nc{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid #f0f1f5}
.rlx .rp-bar+.rp-nc,.rlx .rp-quiet+.rp-nc{margin-top:4px}
.rlx .rp-nc:first-child{border-top:0}
.rlx .rp-nc .rl-tile{flex:none;width:28px;height:28px;border-radius:9px}
.rlx .rp-nc b{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--rl-ink)}
.rlx .rp-nc b em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rl-ink3);padding:2px 7px;border-radius:999px;background:var(--rl-surface2)}
.rlx .rp-nc span{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--rl-ink3)}

/* the message that went out */
.rlx .rp-msg{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:20px;align-items:start}
.rlx .rp-msg .rl-cb-phone{margin:0}

/* people */
.rlx .rp-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.rlx .rp-chip{height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--rl-ink2);background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rlx .rp-chip:hover{box-shadow:inset 0 0 0 1px #d5d9e3}
.rlx .rp-chip i{font-style:normal;color:var(--rl-ink3);font-weight:500;font-variant-numeric:tabular-nums}
.rlx .rp-chip.is-on{color:#fff;background:var(--rl-ink);box-shadow:none}
.rlx .rp-chip.is-on i{color:rgba(255,255,255,.6)}
.rlx .rp-path{display:flex;align-items:center;gap:0}
.rlx .rp-path i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rl-surface3);box-shadow:inset 0 0 0 1.5px var(--rl-ink4)}
.rlx .rp-path i.on{background:var(--rl-acc);box-shadow:none}
.rlx .rp-path i.bad{background:var(--rl-danger);box-shadow:none}
.rlx .rp-path u{width:13px;height:2px;background:var(--rl-surface3);text-decoration:none}
.rlx .rp-path u.on{background:var(--rl-acc)}
.rlx .rp-pathk{display:flex;gap:22px;margin-top:3px;font-size:10px;color:var(--rl-ink3)}
.rlx .rp-say{max-width:280px;color:var(--rl-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1080px){
  .rlx .rp-2,.rlx .rp-2e{grid-template-columns:minmax(0,1fr)}
  .rlx .rp-acts{grid-template-columns:minmax(0,1fr)}
  .rlx .rp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .rp-msg{grid-template-columns:minmax(0,1fr)}
  .rlx .rp-msg .rl-cb-phone{margin:0 auto}
}
@media (max-width:760px){
  .rlx .rp-hd{padding:10px 12px 0;gap:8px}
  .rlx .rp-hd .t b{font-size:15.5px}
  .rlx .rp-meta{padding:6px 12px 0;font-size:12px}
  .rlx .rp-tabs{padding:6px 6px 0;overflow-x:auto;scrollbar-width:none}
  .rlx .rp-body{padding:12px 12px calc(20px + env(safe-area-inset-bottom))}
  .rlx .rp-card{padding:15px}
  .rlx .rp-verdict{flex-direction:column;gap:14px;padding:16px}
  .rlx .rp-verdict h2{font-size:16.5px}
  .rlx .rp-verdict .ask{align-self:stretch}
  .rlx .rp-verdict .ask .rl-btn{width:100%}
  .rlx .rp-kpi .v b{font-size:23px}
  .rlx .rp-kpi svg.sp{display:none}
  .rlx .rp-fun .s,.rlx .rp-fun .gap{grid-template-columns:60px minmax(0,1fr) 74px;gap:8px}
  .rlx .rp-hours i{height:26px}
  .rlx .rp-hax span:nth-child(odd){visibility:hidden}
  .rlx .rp-split td.k{width:40%}
  .rlx .rp-say{display:none}
}