/* CONNECTED RETAIL MEDIA, chapter 0 styles. The front door.

   ── ONE SET OF PRIMITIVES, USED NINE TIMES ───────────────────────────────────

   Chapter 0 carries nine components across four modules, which is the densest
   part of the Academy, and the reason is that this is the chapter a reader meets
   before they know any of the words. Nine bespoke class sets would be nine
   chances to ship one that is unreadable at 320 pixels.

   So there is one `.r0-` set here and every component in the chapter uses it. It
   is deliberately the same SHAPE as chapter 1's `.rc-` set, under its own names,
   because the two front chapters should read as one hand and neither should be
   able to break the other by editing a shared rule.

     .r0-pick / .r0-p   a row of choices. Wraps. Never a sideways scroll on a
                        phone, because a chooser that scrolls sideways hides the
                        option a reader needed
     .r0-out            the panel the choice writes into. Always aria-live
     .r0-kv             a labelled paragraph, label ABOVE the value rather than
                        beside it, so a narrow screen never puts one row's label
                        next to another row's value
     .r0-tier           the evidence label, in the kit's own three tones
     .r0-warn           the honesty box, used where a component is about to print
                        something the research does not support
     .r0-hi             the box that carries the thing to do
     .r0-chairs         four cards side by side, wrapping to one column
     .r0-bcount         the three badge counts, computed rather than typed

   THE ONE RULE WORTH READING BEFORE EDITING. The four-chair comparison wraps
   into whole cards and never reflows into a scramble. The previous Academy
   shipped a comparison that narrowed on a phone, did not stack, and landed row
   labels beside other rows' values. "The board did not get smaller. It got
   scrambled, and it looked deliberate."

   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 CHOOSER ──────────────────────────────────────────────────────────── */
.r0-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.r0-p{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font-size:12.5px;line-height:1.35;padding:7px 10px;text-align:left;max-width:100%}
.r0-p b{font-weight:600;color:var(--ink-1)}
.r0-p.on{border-left:3px solid var(--st);background:var(--sur-2)}
.r0-p.r0-sm{font-size:12px;padding:5px 9px}
.r0-same{font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}

/* ── THE OUTPUT PANEL ─────────────────────────────────────────────────────── */
.r0-out{border-top:1px solid var(--line);padding-top:13px;min-height:96px}
.r0-out h6{margin:0 0 10px;font-size:14.5px;color:var(--ink-1);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.r0-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.r0-kv{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.r0-kv span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.r0-kv b{color:var(--ink-1)}

/* ── THE EVIDENCE LABEL. Same three tones as chapter 1. ───────────────────── */
.r0-tier{font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;white-space:nowrap;align-self:flex-start}
.r0-tier.doc{background:rgba(159,214,160,.16);color:#8fc890}
.r0-tier.typ{background:rgba(240,194,116,.16);color:#e0b46a}
.r0-tier.recon{background:rgba(138,144,166,.18);color:#9aa0b4}

/* ── THE TWO BOXES ────────────────────────────────────────────────────────── */
.r0-warn{background:var(--sur-2);border-left:3px solid var(--warn);border-radius:0 5px 5px 0;
  padding:9px 12px;margin:0 0 13px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.r0-warn b{color:var(--ink-1)}
.r0-warn p{margin:7px 0 0}
.r0-hi{background:var(--sur-2);border-left:3px solid var(--st);border-radius:0 5px 5px 0;
  padding:10px 12px;margin:13px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.r0-hi b{display:block;color:var(--ink-1);margin-bottom:4px}
.r0-hi p{margin:8px 0 0}
.r0-hi .r0-kv{margin:0}
.r0-ask{margin:7px 0 0;padding-left:19px}
.r0-ask li{margin:0 0 5px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.r0-cwarn{margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--ink-4);font-style:italic}

/* ── 0B · THE FOUR CHAIRS. Wraps into whole cards. Never reflows. ─────────── */
.r0-chairs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.r0-chair{flex:1 1 210px;min-width:0;background:var(--sur-1);border:1px solid var(--line);
  border-radius:7px;padding:9px 11px 11px;display:flex;flex-direction:column;gap:5px}
.r0-chair.same{border-style:dashed}
.r0-chair b{font-size:12.5px;line-height:1.35;color:var(--ink-1)}
.r0-chair p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ── 0.1 · THE UNSCORED GATE ──────────────────────────────────────────────── */
.r0-gate{display:flex;flex-direction:column;gap:8px}
.r0-gi{border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:var(--sur-1)}
.r0-gq{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--ink-1)}
.r0-gb{display:flex;flex-wrap:wrap;gap:6px}
.r0-g{font-size:12.5px;padding:5px 10px}
.r0-g.on{border-left:3px solid var(--st);background:var(--sur-2)}
.r0-gfoot{margin-top:13px}
.r0-count{margin:0 0 8px;font-family:var(--ui);font-size:11px;letter-spacing:.06em;
  color:var(--ink-4)}
.r0-done{font-size:13px;padding:6px 12px}

/* ── 0.1 · THE BADGE COUNT, COMPUTED FROM THE CORE TABLE ──────────────────── */
.r0-bcount{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.r0-bc{flex:1 1 150px;background:var(--sur-1);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.r0-bc.ok{border-color:rgba(159,214,160,.45)}
.r0-bc.part{border-color:rgba(240,194,116,.45)}
.r0-bc.no{border-color:rgba(138,144,166,.45)}
.r0-bn{font-family:var(--mono);font-size:24px;line-height:1;color:var(--ink-1)}
.r0-bc.ok .r0-bn{color:#8fc890}
.r0-bc.part .r0-bn{color:#e0b46a}
.r0-bc.no .r0-bn{color:#9aa0b4}
.r0-bl{font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4)}
.r0-bnote{flex:1 1 100%;margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.r0-bnote b{color:var(--ink-1)}
.r0-inc{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}

/* ── 0.2 · THE RUN, WITH THE BLANK STEPS GREYED ───────────────────────────── */
.r0-steps{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.r0-s{font-size:11.5px;line-height:1.35;padding:4px 8px;border-radius:4px;
  background:var(--sur-1);border:1px solid var(--line);color:var(--ink-2)}
.r0-s.gone{opacity:.42;text-decoration:line-through;border-style:dashed}

@media (max-width:520px){
  .r0-p{font-size:12px}
  .r0-chair{flex:1 1 100%}
  .r0-bc{flex:1 1 100%}
  .r0-bn{font-size:21px}
}