/* CONNECTED RETAIL MEDIA: the shared kit's styles.
   The run, the returning picture, and the three-businesses filter.

   ── THE ONE RULE THIS FILE EXISTS TO GET RIGHT FIRST TIME ────────────────────

   The returning picture is a six column table and the comparison ACROSS columns
   is the teaching. The previous Academy shipped exactly this shape and its
   render pass found the defect only at the end: on a phone the rule narrowed the
   grid to two columns expecting it to stack, it did not stack, every cell
   reflowed, and the row labels landed beside other rows' values.

   "The board did not get smaller. It got scrambled, and it looked deliberate."

   So this table never reflows. It keeps all six columns at a legible width and
   SCROLLS SIDEWAYS WITH THE ROW LABELS PINNED, which is the fix that Academy
   arrived at after the fact and this one starts with. The right edge fades so a
   reader can see there is more, which is the same mechanism three earlier
   exhibits on this platform already use. One proven pattern, not two.

   Nothing here is below 9px at any width. The render pass measures it on every
   shot rather than judging by eye.                                            */

/* ── THE RUN ──────────────────────────────────────────────────────────────── */
.rr-biz{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:14px}
.rr-bizlab{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);margin-right:4px}
.rr-b{font-size:12.5px;padding:5px 10px}
.rr-b.on{border-left:3px solid var(--st);background:var(--sur-2)}

.rr-track{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rr-s{flex:1 0 132px;min-width:132px;text-align:left;background:var(--sur-1);
  border:1px solid var(--line);border-radius:7px;padding:9px 10px 10px;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;transition:background .12s,border-color .12s}
.rr-s:hover{border-color:var(--st)}
.rr-s.on{border-color:var(--st);background:var(--sur-2);box-shadow:inset 3px 0 0 var(--st)}
.rr-s.gone{opacity:.45}
.rr-n{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.rr-t{font-size:13px;line-height:1.35;color:var(--ink-1);font-weight:600}
.rr-badge{font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;align-self:flex-start;margin-top:2px}
.rr-badge.ok{background:rgba(159,214,160,.16);color:#8fc890}
.rr-badge.part{background:rgba(240,194,116,.16);color:#e0b46a}
.rr-badge.no{background:rgba(138,144,166,.18);color:#9aa0b4}
.rr-gone{font-size:10.5px;color:var(--ink-4);font-style:italic}

.rr-arrow{margin:9px 0 2px;padding-left:2px}
.rr-arrow span{display:inline-block;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);border-top:1px dashed var(--line-2);
  border-left:1px dashed var(--line-2);border-radius:5px 0 0 0;padding:5px 9px 0 9px}

.rr-detail{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;min-height:96px}
.rr-detail h6{margin:0 0 9px;font-size:14.5px;color:var(--ink-1)}
.rr-prompt{font-size:14px;color:var(--ink-3);margin:0}
.rr-detail p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rr-detail 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}
.rr-see.ok b{color:#8fc890}
.rr-see.part b{color:#e0b46a}
.rr-see.no b{color:#9aa0b4}
.rr-gonebig{background:var(--sur-2);border-left:3px solid var(--warn);padding:9px 11px;
  border-radius:0 5px 5px 0}
.rr-subs{font-size:13px;color:var(--ink-3)}
.rr-note{color:var(--ink-3)}

/* ── THE RETURNING PICTURE ────────────────────────────────────────────────── */
.rs-trips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rs-t{font-size:12.5px;padding:5px 10px}
.rs-t.on{border-left:3px solid var(--st);background:var(--sur-2)}

/* Scrolls sideways. Never reflows. See the header of this file. */
.rs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;position:relative;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
table.rs{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
table.rs th,table.rs td{border-bottom:1px solid var(--line);padding:7px 9px;text-align:left;
  vertical-align:middle}
table.rs 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);white-space:nowrap}
table.rs thead th.live{color:var(--st)}
table.rs tbody th{font-weight:500;color:var(--ink-2);line-height:1.4;min-width:220px;
  position:sticky;left:0;background:var(--sur-0);z-index:1}
table.rs td{text-align:center;width:74px}
.rs-v{display:none;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase}
td.live .rs-v{display:block}
td.live .rs-dot{display:none}
.rs-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
td.ok .rs-dot,td.ok .rs-v{background:rgba(159,214,160,.9)}
td.part .rs-dot,td.part .rs-v{background:rgba(240,194,116,.9)}
td.no .rs-dot,td.no .rs-v{background:rgba(138,144,166,.55)}
td.na .rs-dot{background:transparent;border:1px dashed var(--line-2)}
td.live .rs-v{color:#14161c;padding:3px 5px;border-radius:3px;line-height:1.3}
td.na.live .rs-v{background:transparent;border:1px dashed var(--warn);color:var(--warn)}
td.ctx{opacity:.5}

.rs-rule{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.rs-rule p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rs-rule p:last-child{margin-bottom:0}
.rs-rule 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}
.rs-brk{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}

/* ── THE THREE BUSINESSES ─────────────────────────────────────────────────── */
.rb-opts{display:flex;flex-wrap:wrap;gap:7px}
.rb-o{text-align:left;display:flex;flex-direction:column;gap:3px;flex:1 0 176px;
  padding:9px 11px}
.rb-o b{font-size:13.5px;color:var(--ink-1)}
.rb-o span{font-family:var(--ui);font-size:10.5px;letter-spacing:.05em;color:var(--ink-4)}
.rb-o.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rb-out{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;min-height:84px}
.rb-prompt{font-size:14px;color:var(--ink-3);margin:0}
.rb-d{font-size:14.5px;line-height:1.55;color:var(--ink-1);margin:0 0 11px}
.rb-steps{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.rb-s{font-size:11.5px;padding:4px 8px;border:1px solid var(--line);border-radius:4px;
  color:var(--ink-3)}
.rb-s.gone{opacity:.4;text-decoration:line-through;border-style:dashed}
.rb-who{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rb-who span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}

@media (max-width:640px){
  .rr-s{flex:1 0 124px;min-width:124px}
  table.rs tbody th{min-width:186px}
}