/* CONNECTED RETAIL MEDIA, chapter 4 styles. What gets shown, and who decides.

   Seven components. Every one of them carries a comparison the reader is meant
   to make ACROSS things rather than down a list, so the same three rules apply
   throughout and they are the rules retail_kit.css already set.

     1. NOTHING REFLOWS INTO A SCRAMBLE. Where a component holds more columns
        than a phone can show, it scrolls sideways with the labels pinned rather
        than narrowing. The previous Academy shipped a six column comparison that
        did not stack, every cell reflowed, and row labels landed beside other
        rows' values. "The board did not get smaller. It got scrambled, and it
        looked deliberate."

     2. NOTHING IS BELOW 9px AT ANY WIDTH. The render pass measures it on every
        shot rather than judging by eye.

     3. THE COLOUR CARRIES ONE MEANING ACROSS THE WHOLE CHAPTER, and it is the
        kit's meaning rather than a second one invented here.
          green   published, or the state you can act on
          amber   published by some, or a state you must confirm
          grey    published by nobody, and that is a measurement rather than an
                  accusation

   The three colour values are the kit's own, repeated here rather than imported,
   because a chapter file that redefines a variable is how two exhibits in one
   Academy end up disagreeing about what amber means.                          */

/* ── SHARED ACROSS THE CHAPTER ────────────────────────────────────────────── */
/* The four disclosure toggles, sized once. Every one of them opens a panel that
   a reader can finish the module without reading, which is the point of them. */
.rq-testb,.ra-owedb,.ri-halfb,.rf-stdb{font-size:12.5px;padding:5px 11px}
.rq-out h6,.ra-out h6,.rf-out h6,.rh-out h6,.rm-make h6{margin:0 0 9px;font-size:14.5px;
  color:var(--ink-1)}
.rq-out p,.ra-out p,.rf-out p,.rh-out p,.rm-wayout p,.rl-out p{margin:0 0 9px;font-size:14px;
  line-height:1.55;color:var(--ink-2)}
.rq-out p span,.ra-out p span,.rf-out p span,.rh-out p span,.rm-wayout p span,.rl-out p span,
.ri-c p span,.ri-half p span,.rf-std p span{display:block;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}

/* ── 4.1 · TWELVE LINE ITEMS, THREE KINDS ─────────────────────────────────── */
.rq-keys{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rq-key{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--ui);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:4px}
.rq-key b{font-weight:600}
.rq-key em{font-style:normal;opacity:.75;font-size:10px}
.rq-key.bid{background:rgba(159,214,160,.16);color:#8fc890}
.rq-key.rate{background:rgba(240,194,116,.16);color:#e0b46a}
.rq-key.shop{background:rgba(138,144,166,.20);color:#9aa0b4}

.rq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.rq-i{display:flex;align-items:flex-start;gap:8px;text-align:left;background:var(--sur-1);
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;cursor:pointer;font-size:13px;
  line-height:1.4;color:var(--ink-2);transition:background .12s,border-color .12s}
.rq-i:hover{border-color:var(--st)}
.rq-i.on{border-color:var(--st);background:var(--sur-2);color:var(--ink-1)}
.rq-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:5px}
.rq-i.bid .rq-dot{background:#8fc890}
.rq-i.rate .rq-dot{background:#e0b46a}
.rq-i.shop .rq-dot{background:#9aa0b4}

.rq-out{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;min-height:118px}
.rq-out h6.bid{color:#8fc890}
.rq-out h6.rate{color:#e0b46a}
.rq-out h6.shop{color:#9aa0b4}
.rq-prompt{color:var(--ink-3)}
.rq-kind b{font-weight:600}
.rq-kind.bid b{color:#8fc890}
.rq-kind.rate b{color:#e0b46a}
.rq-kind.shop b{color:#9aa0b4}
.rq-auc b{font-size:15px;color:var(--ink-1)}
.rq-note{background:var(--sur-2);border-left:3px solid var(--warn);padding:9px 11px;
  border-radius:0 5px 5px 0;font-size:13px}

.rq-testwrap{margin-top:12px}
.rq-test{margin-top:10px;display:grid;gap:8px}
.rq-tq{position:relative;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:10px 12px 10px 38px}
.rq-tn{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:12px;
  color:var(--ink-4)}
.rq-tq b{display:block;font-size:13.5px;color:var(--ink-1);margin-bottom:5px}
.rq-tq em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.rq-tq em.y{color:#8fc890}

/* ── 4.2 · THE PRICING RULE, BY NETWORK ───────────────────────────────────── */
.ra-rows{display:grid;gap:6px}
.ra-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  text-align:left;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:9px 11px;cursor:pointer;transition:background .12s,border-color .12s}
.ra-r:hover{border-color:var(--st)}
.ra-r.on{border-color:var(--st);background:var(--sur-2);box-shadow:inset 3px 0 0 var(--st)}
.ra-who{font-size:13.5px;line-height:1.4;color:var(--ink-1);flex:1 1 200px}
.ra-rule{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;white-space:nowrap}
.ra-rule.ok{background:rgba(159,214,160,.16);color:#8fc890}
.ra-rule.part{background:rgba(240,194,116,.16);color:#e0b46a}
.ra-rule.no{background:rgba(138,144,166,.20);color:#9aa0b4}

.ra-out{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;min-height:110px}
.ra-prompt{color:var(--ink-3)}
.ra-p b{font-size:15px}
.ra-p.ok b{color:#8fc890}
.ra-p.part b{color:#e0b46a}
.ra-p.no b{color:#9aa0b4}
.ra-you{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}
.ra-owedwrap{margin-top:12px}
.ra-owed{margin-top:10px;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px}
.ra-owedl{margin:0 0 9px;padding-left:18px}
.ra-owedl li{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:4px}
.ra-owedn{margin:0;font-size:13px;line-height:1.55;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:9px}

/* ── 4.3 · ONE NOUN, FOUR DEFINITIONS ─────────────────────────────────────── */
.ri-lv{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:13px}
.ri-lvlab{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);margin-right:4px}
.ri-l{font-size:13px;padding:5px 12px;font-family:var(--mono)}
.ri-l.on{border-left:3px solid var(--st);background:var(--sur-2)}

/* Four columns of definition. They scroll sideways rather than reflowing,
   because the whole teaching is reading one against another. */
.ri-cols{display:grid;grid-template-columns:repeat(4,minmax(212px,1fr));gap:8px;overflow-x:auto;
  padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ri-c{background:var(--sur-1);border:1px solid var(--line);border-radius:7px;padding:11px 12px;
  min-width:212px}
.ri-c.unknown{border-style:dashed;border-color:var(--line-2)}
.ri-who{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.ri-name{display:block;font-size:14px;line-height:1.35;color:var(--ink-1);margin-bottom:9px}
.ri-f{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ri-den{background:var(--sur-2);border-left:3px solid var(--st);padding:7px 9px;
  border-radius:0 5px 5px 0}
.ri-c.unknown .ri-den{border-left-color:#9aa0b4}
.ri-read{margin:9px 0 0;border-top:1px solid var(--line);padding-top:9px;font-size:13px;
  line-height:1.55;color:var(--ink-1)}
.ri-read span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}

.ri-halfwrap{margin-top:14px}
.ri-half{margin-top:10px;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px}
.ri-h{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ri-h:last-child{margin-bottom:0}
.ri-h span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.ri-h.no{color:#9aa0b4}
.ri-h.do{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}

/* ── 4.4 · FOUR STATES OF ONE PRICE ───────────────────────────────────────── */
.rf-sw{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rf-t{font-size:13px;padding:6px 12px}
.rf-t.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rf-out{border-top:1px solid var(--line);padding-top:13px;min-height:150px}
.rf-pay{font-size:15px;color:var(--ink-1)}
.rf-see.warn{background:var(--sur-2);border-left:3px solid var(--warn);padding:9px 11px;
  border-radius:0 5px 5px 0}
/* The gap in the drawing IS the finding, so it is drawn as a hole rather than
   as a missing paragraph. */
.rf-hid{border:1px dashed var(--line-2);border-radius:6px;padding:10px 12px;color:#9aa0b4;
  font-size:13.5px;line-height:1.55}
.rf-hid span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rf-mins{margin-top:12px}
.rf-min{margin:0;font-size:13px;line-height:1.55;color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:11px}
.rf-min span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rf-min b{font-family:var(--mono);color:var(--ink-1)}
.rf-stdwrap{margin-top:12px}
.rf-std{margin-top:10px;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px}
.rf-s{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rf-s:last-child{margin-bottom:0}
.rf-s.ok{border-left:3px solid #8fc890;padding-left:10px}
.rf-s.warn{border-left:3px solid var(--warn);padding-left:10px}

/* ── 4.5 · ELEVEN HABITS ──────────────────────────────────────────────────── */
.rh-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.rh-t{font-size:12.5px;padding:5px 10px}
.rh-t.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rh-t.sharp{border-top:2px solid var(--warn)}
.rh-out{border-top:1px solid var(--line);padding-top:13px;min-height:210px}
.rh-badge{margin-left:9px;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;vertical-align:middle}
.rh-badge.part{background:rgba(240,194,116,.16);color:#e0b46a}
.rh-badge.no{background:rgba(138,144,166,.20);color:#9aa0b4}
.rh-wrong{border-left:3px solid var(--warn);padding-left:10px}
.rh-cost{color:var(--ink-3)}
.rh-lev{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}
.rh-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-4);
  border-top:1px solid var(--line);padding-top:9px}

/* ── 4.6 · THE PAGE, COUNTED ──────────────────────────────────────────────── */
.rl-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.rl-lab{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.rl-range{flex:1 1 180px;min-width:150px;accent-color:var(--st)}
.rl-val{font-family:var(--mono);font-size:13px;color:var(--ink-1);white-space:nowrap}

/* The page itself. Twenty four cells, and the sold ones are filled. It is a
   drawing of an arithmetic rather than a picture of a results page, and the
   component's own note says the twenty four is an assumption. */
.rl-page{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:13px}
.rl-cell{height:22px;border-radius:3px;background:var(--sur-2);border:1px solid var(--line)}
.rl-cell.paid{background:rgba(240,194,116,.28);border-color:#e0b46a}

.rl-out{border-top:1px solid var(--line);padding-top:12px}
.rl-o b{font-size:16px;font-family:var(--mono);color:var(--ink-1)}
.rl-sharp{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}
.rl-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rl-t{font-size:12.5px;padding:5px 10px}
.rl-t.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rl-panel{margin-top:10px;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px}
.rl-l{margin:0 0 9px;padding-left:20px}
.rl-l li{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:5px}
.rl-n{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:9px}
.rl-a{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rl-g{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--ink-3);
  border-left:3px solid var(--warn);padding-left:10px}
.rl-g:last-child{margin-bottom:0}

/* ── 4.7 · WHAT IT REMOVES, AND WHERE THE MONEY WAITS ─────────────────────── */
.rm-ways{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.rm-w{font-size:12.5px;padding:5px 11px}
.rm-w.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rm-wayout{border-top:1px solid var(--line);padding-top:13px;min-height:130px}
.rm-feels{background:var(--sur-2);border-left:3px solid var(--warn);padding:9px 11px;
  border-radius:0 5px 5px 0}
.rm-across{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:12px}

.rm-make{margin-top:16px;border-top:1px solid var(--line-2);padding-top:14px}
.rm-shops{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:9px}
.rm-s{background:var(--sur-1);border:1px solid var(--line);border-radius:7px;padding:11px 12px}
.rm-s.done{border-color:var(--st)}
.rm-s b{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-1);margin-bottom:6px}
.rm-sf{margin:0 0 9px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.rm-btns{display:flex;flex-wrap:wrap;gap:6px}
.rm-p{font-size:12px;padding:4px 9px}
.rm-p.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rm-r{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:9px}
.rm-note{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-4)}

/* ── NARROW WIDTHS ────────────────────────────────────────────────────────── */
/* Nothing below collapses a comparison into a single column. Where there is not
   room, the reader scrolls, which keeps the comparison readable. */
@media (max-width:560px){
  .rq-grid{grid-template-columns:1fr}
  .rl-page{grid-template-columns:repeat(4,1fr)}
  .ri-cols{grid-template-columns:repeat(4,minmax(196px,196px))}
  .rm-shops{grid-template-columns:1fr}
}