/* CONNECTED RETAIL MEDIA, chapter 5 styles. Leaving the shop.

   Four components of this chapter's own, plus the returning picture, which is
   drawn by the shared kit and styled in retail_kit.css. Nothing here restyles
   the returning picture, because it must look identical at all six appearances
   or it stops being one exhibit.

   THE RULE THIS CHAPTER INHERITS AND MUST NOT BREAK. A comparison never reflows
   into a scramble on a narrow screen. Where a picture is a row of things being
   compared, it scrolls sideways or it wraps into whole cards. It never splits a
   label from its value.

   TWO THINGS WORTH READING BEFORE EDITING.

   The accreditation exhibit carries a visible read date, drawn as a pill at the
   top of the picture rather than as a note under it. It is in the Academy's
   declared maintenance set and the date is the whole reason the exhibit is
   trustworthy a year from now. Do not restyle the pill into something a reader
   skims past.

   The accreditation exhibit also tags every scope line as a count or an outcome,
   and the two tags carry different colours. That colour difference is the
   teaching rather than decoration, so it holds in both themes and it never
   becomes the only way the difference is shown. The word is always printed.

   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.  */

/* ── The read-date pill, shared by two exhibits in this chapter ───────────── */
.ra5-read,.rm5-read{margin:0 0 12px;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);border:1px dashed var(--line-2);border-radius:4px;
  padding:5px 9px;display:inline-block}
.ra5-read b,.rm5-read b{color:var(--ink-2)}

/* ── 5.1 · FOUR SHAPES UNDER ONE WORD ─────────────────────────────────────── */
.ro5-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.ro5-t{font-size:12.5px;padding:6px 10px;text-align:left;display:flex;align-items:center;gap:7px}
.ro5-t.on{border-left:3px solid var(--st);background:var(--sur-2)}
.ro5-n{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.ro5-t.on .ro5-n{color:var(--st)}
.ro5-out{border-top:1px solid var(--line);padding-top:13px;min-height:120px}
.ro5-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.ro5-one{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--ink-1)}
.ro5-rows{display:flex;flex-direction:column;gap:10px}
.ro5-r{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ro5-r span,.ro5-dec span,.ro5-settles span,.ro5-mean span,.ro5-ask span{display:block;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.ro5-dec{margin:12px 0 0;font-size:14px;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}
.ro5-settles{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2);
  border:1px solid var(--line);border-radius:6px;padding:10px 11px}
.ro5-sep{margin:18px 0 10px;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);border-top:1px solid var(--line);padding-top:12px}
.ro5-said{display:flex;flex-wrap:wrap;gap:6px}
.ro5-s{font-size:12.5px;padding:5px 10px;text-align:left}
.ro5-s.on{border-left:3px solid var(--st);background:var(--sur-2)}
.ro5-saidout{margin-top:12px;min-height:64px}
.ro5-saidout p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ro5-saidout p:last-child{margin-bottom:0}
.ro5-fifth{margin-top:16px}
.ro5-fout{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.ro5-fout h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.ro5-fout p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ro5-fwhy{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}

/* ── 5.3 · ONE MATCH, FOUR HONEST RATES ───────────────────────────────────── */
.rm5-counts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.rm5-c{flex:1 0 132px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  background:var(--sur-1);display:flex;flex-direction:column;gap:2px}
.rm5-c b{font-family:var(--mono);font-size:17px;color:var(--ink-1)}
.rm5-c span{font-size:11.5px;line-height:1.35;color:var(--ink-4)}
.rm5-bases{display:flex;flex-wrap:wrap;gap:6px}
.rm5-b{font-size:12.5px;padding:5px 10px;text-align:left;flex:1 0 208px}
.rm5-b.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rm5-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:96px}
.rm5-out p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rm5-prompt{color:var(--ink-3)}
.rm5-big{font-size:16px;color:var(--ink-1)}
.rm5-big b{font-family:var(--mono);font-size:22px;color:var(--st)}
.rm5-sum{font-family:var(--mono);font-size:12.5px;color:var(--ink-4)}
.rm5-spread{margin:13px 0 0;font-size:14px;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}
.rm5-sep{margin:18px 0 10px;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);border-top:1px solid var(--line);padding-top:12px}
.rm5-asks{display:flex;flex-wrap:wrap;gap:6px}
.rm5-a{font-size:12.5px;padding:5px 10px;text-align:left;flex:1 0 208px}
.rm5-a.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rm5-askout{margin-top:12px;min-height:64px}
.rm5-askout p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rm5-bad span,.rm5-so span{display:block;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rm5-permits{margin-top:18px;border-top:1px solid var(--line);padding-top:13px}
.rm5-permits h6{margin:0 0 10px;font-size:14.5px;color:var(--ink-1)}
table.rm5-t{border-collapse:collapse;width:100%;font-size:13px;display:block;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
table.rm5-t th,table.rm5-t td{border-bottom:1px solid var(--line);padding:7px 9px;
  text-align:left;vertical-align:top;line-height:1.45}
table.rm5-t thead th{font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);font-weight:600;border-bottom:1px solid var(--line-2)}
table.rm5-t tbody th{font-weight:500;color:var(--ink-1);min-width:190px}
table.rm5-t td{color:var(--ink-2);min-width:132px}
.rm5-so{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ── 5.4 · THE REGISTER ───────────────────────────────────────────────────── */
.ra5-what{margin:0 0 13px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ra5-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.ra5-tb{font-size:12.5px;padding:5px 10px}
.ra5-tb.on{border-left:3px solid var(--st);background:var(--sur-2)}
.ra5-list{display:flex;flex-direction:column;gap:6px}
.ra5-r{text-align:left;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:9px 10px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  transition:border-color .12s,background .12s}
.ra5-r:hover{border-color:var(--st)}
.ra5-r.on{border-color:var(--st);background:var(--sur-2);box-shadow:inset 3px 0 0 var(--st)}
.ra5-rt{flex:1 1 240px;font-size:13.5px;line-height:1.4;color:var(--ink-1)}
.ra5-cls{font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px}
.ra5-cls.count{background:rgba(138,144,166,.18);color:#9aa0b4}
.ra5-cls.out{background:rgba(240,194,116,.18);color:#e0b46a}
.ra5-stage{font-family:var(--ui);font-size:10px;letter-spacing:.05em;color:var(--ink-4);
  flex:1 0 100%}
.ra5-out{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;min-height:120px}
.ra5-out h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.ra5-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.ra5-stagebig{margin:0 0 10px;font-family:var(--ui);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn)}
.ra5-m{margin:0 0 11px;padding-left:18px}
.ra5-m li{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:3px}
.ra5-out p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ra5-out p span,.ra5-absent span,.ra5-gask span{display:block;font-family:var(--ui);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:3px}
.ra5-note{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}
.ra5-absent{margin:13px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2);
  border:1px solid var(--line);border-radius:6px;padding:10px 11px}
.ra5-sep{margin:18px 0 10px;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);border-top:1px solid var(--line);padding-top:12px}
.ra5-regimes{display:flex;flex-wrap:wrap;gap:9px}
.ra5-g{flex:1 0 248px;border:1px solid var(--line);border-radius:7px;padding:10px 11px;
  background:var(--sur-1)}
.ra5-g b{display:block;font-size:14px;color:var(--ink-1);margin-bottom:6px}
.ra5-g p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ra5-g p:last-child{margin-bottom:0}
.ra5-art{margin-top:16px}
.ra5-aout{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.ra5-aout h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.ra5-aout p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.ra5-so{background:var(--sur-2);border-left:3px solid var(--warn);padding:9px 11px;
  border-radius:0 5px 5px 0}
.ra5-auction{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:12px}

/* ── 5.5 · SIX LINES ON ONE PLAN ──────────────────────────────────────────── */
.rc5-list{display:flex;flex-direction:column;gap:8px}
.rc5-i{border:1px solid var(--line);border-radius:7px;padding:10px 11px;background:var(--sur-1)}
.rc5-i.ok{border-color:rgba(159,214,160,.5);background:rgba(159,214,160,.07)}
.rc5-i.no{border-color:rgba(240,194,116,.5);background:rgba(240,194,116,.07)}
.rc5-t{margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.rc5-t b{font-size:14px;color:var(--ink-1)}
.rc5-t em{font-family:var(--mono);font-style:normal;font-size:13px;color:var(--ink-3)}
.rc5-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
.rc5-facts span{flex:1 0 168px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.rc5-facts b{display:block;font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px;font-weight:600}
.rc5-btns{display:flex;flex-wrap:wrap;gap:6px}
.rc5-b{font-size:12.5px;padding:5px 10px}
.rc5-b.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rc5-why{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rc5-why span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.rc5-foot{display:flex;align-items:center;gap:10px;margin-top:13px}
.rc5-count{font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--ink-4)}
.rc5-test{margin-top:13px}
.rc5-test p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.rc5-score{font-size:15px;color:var(--ink-1)}
.rc5-testline,.rc5-whyoff{background:var(--sur-2);border-left:3px solid var(--st);
  padding:9px 11px;border-radius:0 5px 5px 0}
.rc5-testline span,.rc5-whyoff span,.rc5-wv span,.rc5-wr span{display:block;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:3px}
.rc5-rel{color:var(--ink-3)}
.rc5-worthbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.rc5-wlab{flex:1 0 100%;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.rc5-w{font-size:12.5px;padding:5px 10px;text-align:left}
.rc5-w.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rc5-worth{margin-top:12px;min-height:88px}
.rc5-worth p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rc5-wt b{color:var(--ink-1)}
.rc5-prompt{color:var(--ink-3)}

@media (max-width:640px){
  .ro5-t,.ro5-s,.rm5-b,.rm5-a,.rc5-w{flex:1 0 100%}
  .rm5-c{flex:1 0 45%}
  .ra5-g{flex:1 0 100%}
  .rc5-facts span{flex:1 0 100%}
}