/* CONNECTED RETAIL MEDIA, chapter 6 styles. Inside the shop.

   Five components. Four are new here and the fifth is the returning picture,
   which is styled once in retail_kit.css and is not restyled per chapter.

   THE ONE RULE THAT MATTERS IN THIS CHAPTER. Three of these exhibits are
   comparisons laid out as two things side by side: two rungs against each other,
   two levers against each other, two tracks of one campaign against each other.
   A comparison that reflows into a single scrambled column on a narrow screen is
   not a comparison. So every pair either stays a pair, or wraps into two whole
   labelled cards, and never splits a label from its value.

   Nothing here is below 9px at any width, and every colour comes from the
   platform's own variables so a theme change reaches this chapter for free.  */

/* ── Shared: the separator line that introduces a second panel ───────────── */
.rq-sep{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}

/* ── 6.1 · FOUR RUNGS, AND EIGHT NUMBERS ──────────────────────────────────── */
.rq-ladder{display:flex;flex-direction:column;gap:6px}
.rq-r{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:var(--sur-1);
  text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.rq-r.on{border-color:var(--st);background:var(--sur-2)}
.rq-r.rep{border-left:3px solid var(--st)}
.rq-n{font-family:var(--mono);font-size:12px;color:var(--ink-4)}
.rq-t{font-size:14px;line-height:1.45;color:var(--ink-1)}
.rq-tag{font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}
.rq-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:80px}
.rq-out h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.rq-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.rq-l{margin:0 0 7px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rq-l span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.rq-l.no{color:var(--ink-2);border-left:3px solid var(--warn);padding-left:9px}
.rq-note{margin:11px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);
  background:var(--sur-2);padding:9px 11px;border-radius:5px}
.rq-inputs{display:flex;flex-wrap:wrap;gap:7px}
.rq-i{flex:1 1 200px;display:grid;grid-template-columns:1fr auto;gap:4px 8px;
  border:1px solid var(--line);border-radius:7px;padding:9px 10px;background:var(--sur-1);
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.rq-i.on{border-color:var(--st);background:var(--sur-2)}
.rq-it{font-size:13.5px;line-height:1.45;color:var(--ink-1)}
.rq-k{font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  align-self:start;padding:2px 6px;border-radius:3px;white-space:nowrap}
.rq-k.ok{background:rgba(159,214,160,.16);color:var(--ink-2)}
.rq-k.part{background:rgba(240,194,116,.16);color:var(--ink-2)}
.rq-k.no{background:rgba(226,138,128,.16);color:var(--ink-2)}
.rq-w{grid-column:1/-1;font-family:var(--ui);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.rq-d{grid-column:1/-1;font-size:13px;line-height:1.55;color:var(--ink-3);margin-top:4px;
  border-top:1px solid var(--line);padding-top:6px}
.rq-tally{margin-top:13px}
.rq-tally p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;border-radius:0 5px 5px 0}

/* ── 6.3 · THE CONSTRAINT LADDER AND THE COST PER POINT ────────────────────── */
.rd-ladder{display:flex;flex-direction:column;gap:4px}
.rd-s{display:grid;grid-template-columns:24px 1fr;gap:3px 9px;border:1px solid var(--line);
  border-radius:6px;padding:7px 10px;background:var(--sur-1)}
.rd-s.on{border-color:var(--warn);background:rgba(240,194,116,.09)}
.rd-s.dead{opacity:.5;border-style:dashed}
.rd-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-4)}
.rd-t{font-size:13.5px;line-height:1.45;color:var(--ink-1)}
.rd-w{grid-column:2;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.rd-note{margin:9px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3)}
.rd-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.rd-c{flex:1 1 210px;border:1px solid var(--line);border-radius:7px;padding:9px 10px;
  background:var(--sur-1)}
.rd-c p{margin:0 0 7px;font-size:13.5px;line-height:1.45;color:var(--ink-1)}
.rd-a{font-size:12px;padding:4px 9px;margin-right:5px}
.rd-a.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rd-verdict{margin-top:12px;min-height:44px}
.rd-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.rd-v{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);background:var(--sur-2);
  border-left:3px solid var(--warn);padding:9px 11px;border-radius:0 5px 5px 0}
.rd-v span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rd-costs{display:flex;flex-wrap:wrap;gap:9px}
.rd-lev{flex:1 1 250px;border:1px solid var(--line);border-radius:7px;padding:10px 11px;
  background:var(--sur-1)}
.rd-lt{margin:0 0 4px;font-size:14px;color:var(--ink-1)}
.rd-le{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.rd-le b{color:var(--ink-2);font-weight:500}
.rd-btns{display:flex;flex-wrap:wrap;gap:5px}
.rd-cb{font-size:12px;padding:4px 9px}
.rd-cb.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rd-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:70px}
.rd-refuse{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  border:1px dashed var(--line-2);border-radius:6px;padding:10px 11px}
.rd-r{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rd-r span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rd-r b{font-family:var(--mono);color:var(--ink-1)}
.rd-win{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-1)}
.rd-cav{margin:0;padding-left:17px}
.rd-cav li{font-size:13px;line-height:1.6;color:var(--ink-3);margin-bottom:5px}

/* ── 6.4 · ONE CAMPAIGN, TWO GATES, EIGHT WEEKS ────────────────────────────── */
.rc-bar{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.rc-bar .btn{font-size:12.5px;padding:5px 11px}
.rc-w{font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--ink-4)}
.rc-rail{display:flex;gap:4px;margin-bottom:13px;overflow-x:auto;padding-bottom:3px}
.rc-d{flex:1 0 auto;border:1px solid var(--line);border-top:3px solid var(--line);
  border-radius:0 0 5px 5px;background:var(--sur-1);padding:6px 8px;cursor:pointer;
  font:inherit;color:inherit}
.rc-d span{font-family:var(--ui);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);white-space:nowrap}
.rc-d.past{border-top-color:var(--line-2)}
.rc-d.on{border-top-color:var(--st);background:var(--sur-2)}
.rc-d.on span{color:var(--ink-1)}
.rc-tracks{display:flex;flex-wrap:wrap;gap:9px}
.rc-t{flex:1 1 250px;border:1px solid var(--line);border-radius:7px;padding:10px 11px;
  background:var(--sur-1)}
.rc-t.phys{border-left:3px solid var(--warn)}
.rc-t.dig{border-left:3px solid var(--st)}
.rc-t h6{margin:0 0 6px;font-size:13px;color:var(--ink-2)}
.rc-t p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-1)}
.rc-know{margin-top:13px}
.rc-know p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);background:var(--sur-2);
  border-left:3px solid var(--st);padding:9px 11px;border-radius:0 5px 5px 0}
.rc-know span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rc-close{margin:13px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 6.5 · FOUR CLAIMS ────────────────────────────────────────────────────── */
.rf-list{display:flex;flex-direction:column;gap:9px}
.rf-i{border:1px solid var(--line);border-radius:7px;padding:10px 11px;background:var(--sur-1)}
.rf-i.ok{border-color:rgba(159,214,160,.5);background:rgba(159,214,160,.07)}
.rf-i.no{border-color:rgba(240,194,116,.5);background:rgba(240,194,116,.07)}
.rf-t{margin:0 0 5px;font-size:14.5px;line-height:1.45;color:var(--ink-1)}
.rf-h{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.rf-h span,.rf-f span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.rf-btns{display:flex;flex-wrap:wrap;gap:6px}
.rf-b{font-size:12px;padding:5px 10px}
.rf-b.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rf-f{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.rf-why{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;border-radius:0 5px 5px 0}
.rf-why span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rf-foot{display:flex;align-items:center;gap:10px;margin-top:13px}
.rf-count{font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--ink-4)}
.rf-out{margin-top:13px}
.rf-score{margin:0 0 9px;font-size:15px;color:var(--ink-1)}
.rf-rule{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);background:var(--sur-2);
  border-left:3px solid var(--st);padding:9px 11px;border-radius:0 5px 5px 0}
.rf-rule span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}

/* ── Narrow screens: the pairs wrap into whole cards, never into fragments ── */
@media (max-width:560px){
  .rq-r{grid-template-columns:22px 1fr}
  .rq-tag{grid-column:2;white-space:normal}
  .rq-i{flex:1 1 100%}
  .rd-c,.rd-lev,.rc-t{flex:1 1 100%}
  .rc-rail{gap:3px}
}