/* CONNECTED RETAIL MEDIA, chapter 1 styles.

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

   Chapter 1 carries thirteen components. Thirteen bespoke class sets is thirteen
   chances to ship one that is unreadable at 320 pixels, and the render pass only
   catches the ones somebody thought to photograph.

   So there is one set of primitives here and every component in the chapter uses
   it. Anything that needs a shape of its own is named after the component and
   sits at the bottom, where it can be counted.

     .rc-pick / .rc-p     a row of choices. Wraps. Never a horizontal scroll on a
                          phone, because a chooser that scrolls sideways hides the
                          option a reader needed
     .rc-out              the panel the choice writes into. Always aria-live
     .rc-kv               a labelled paragraph. The label is uppercase and small
                          and it sits ABOVE the value rather than beside it, so a
                          narrow screen never puts a label next to another row's
                          value. That defect cost the previous Academy a rebuild
     .rc-tab              a table. Scrolls sideways with the row labels legible
     .rc-warn             the honesty box. Used where a component is about to
                          print something that is not documented
     .rc-hi               the box that carries the thing to do
     .rc-tier             the evidence label on a chip

   NOTHING IS BELOW 9px AT ANY WIDTH and the two tone pairs used for the tier
   chips are the same ones the kit already uses for its badges, so a reader meets
   two colour meanings across the whole Academy rather than fourteen.          */

/* ── THE CHOOSER ──────────────────────────────────────────────────────────── */
.rc-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.rc-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%}
.rc-p b{font-weight:600;color:var(--ink-1)}
.rc-p.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rc-p.sel{outline:1px dashed var(--line-2);outline-offset:2px}
.rc-p.rc-sm{font-size:12px;padding:5px 9px}
.rc-p2{font-size:12.5px;padding:6px 11px}
.rc-p2.on{border-left:3px solid var(--st);background:var(--sur-2)}
.rc-pick2{margin:8px 0 10px}

/* ── THE OUTPUT PANEL ─────────────────────────────────────────────────────── */
.rc-out{border-top:1px solid var(--line);padding-top:13px;min-height:92px}
.rc-out h6{margin:0 0 10px;font-size:14.5px;color:var(--ink-1);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rc-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.rc-kv{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rc-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}
.rc-kv b{color:var(--ink-1)}
.rc-note{margin:11px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.rc-lab{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 5px}

/* ── THE EVIDENCE LABEL ───────────────────────────────────────────────────── */
.rc-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}
.rc-tier.doc{background:rgba(159,214,160,.16);color:#8fc890}
.rc-tier.typ{background:rgba(240,194,116,.16);color:#e0b46a}
.rc-tier.recon{background:rgba(138,144,166,.18);color:#9aa0b4}

/* ── THE TWO BOXES ────────────────────────────────────────────────────────── */
.rc-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)}
.rc-warn b{color:var(--ink-1)}
.rc-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)}
.rc-hi b{display:block;color:var(--ink-1);margin-bottom:4px}
.rc-hi p{margin:8px 0 0}
.rc-hi .rc-kv{margin:0}
.rc-ask{margin:6px 0 0;padding-left:19px}
.rc-ask li{margin:0 0 5px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* ── TABLES. Sideways rather than reflowed. Same rule as the kit. ─────────── */
.rc-tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin-bottom:13px}
table.rc-tab{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
table.rc-tab th,table.rc-tab td{border-bottom:1px solid var(--line);padding:7px 9px;
  text-align:left;vertical-align:top;line-height:1.45;color:var(--ink-2)}
table.rc-tab 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.rc-tab tbody th{color:var(--ink-1);font-weight:600;width:34%}
.rc-rowb{background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink-1);font-weight:600;line-height:1.45}
.rc-rowb:hover{color:var(--st)}
tr.rc-tr.on{background:var(--sur-2)}
tr.rc-tr.on th{box-shadow:inset 3px 0 0 var(--st)}

/* ── 1.1, THE FLOOR ───────────────────────────────────────────────────────── */
.rc-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 13px;
  padding:10px 12px;background:var(--sur-1);border:1px solid var(--line);border-radius:7px}
.rc-big{font-family:var(--mono);font-size:26px;line-height:1;color:var(--ink-1)}
.rc-suf{font-size:12.5px;color:var(--ink-3)}
.rc-foot{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}

/* ── 1.5, THE CONFLICT FLAGS ──────────────────────────────────────────────── */
.rc-flags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.rc-flag{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-4);opacity:.55}
.rc-flag.on{opacity:1;color:var(--ink-1);border-color:var(--warn);background:var(--sur-2)}

/* ── 1.7, THE CONSTRAINT SWITCH ───────────────────────────────────────────── */
.rc-con{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.rc-cb{font-size:12.5px;padding:6px 11px;margin-bottom:9px}
.rc-cout .rc-kv{margin-bottom:6px}

/* ── 1.9, THE THREE CLOCKS ────────────────────────────────────────────────── */
.rc-clocks{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.rc-clock{flex:1 1 168px;background:var(--sur-1);border:1px solid var(--line);border-radius:7px;
  padding:8px 10px}
.rc-clock.on{border-color:var(--st);background:var(--sur-2);box-shadow:inset 3px 0 0 var(--st)}
.rc-clock b{display:block;font-size:13px;color:var(--ink-1);margin-bottom:3px}
.rc-clock span{font-size:12px;line-height:1.45;color:var(--ink-3)}

/* ── 1.10, THE ACCOUNT TYPE PANEL ─────────────────────────────────────────── */
.rc-acct{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.rc-floor{background:var(--sur-1);border:1px solid var(--line);border-radius:7px;padding:10px 12px}
.rc-floor .rc-note{margin-top:7px}

@media (max-width:520px){
  .rc-p{font-size:12px}
  .rc-big{font-size:22px}
  .rc-clock{flex:1 1 100%}
}