/* CONNECTED RETAIL MEDIA, chapter 3. What the advertisement is made of.

   ── THE PREFIX RULE, AND WHY IT IS NOT COSMETIC ──────────────────────────────

   Every class in this file begins `c3`. The shared kit already owns `rr-`, `rs-`
   and `rb-`, and chapter 1 owns `rk-`. A chapter file that reached for an
   obvious two-letter prefix would collide with one of those, and a collision in
   CSS does not throw. It renders, slightly wrong, in one chapter, and the render
   pass finds it at the end if it finds it at all.

   ── THE TWO SHAPES THIS CHAPTER NEEDS AND THE PLATFORM DID NOT ALREADY HAVE ──

   THE LADDER. Six chapters of this Academy compare things side by side. This one
   is the only chapter whose central object is an ORDER: the gates are sequential,
   a later one cannot be diagnosed until an earlier one passes, and fixing a later
   one while an earlier one fails changes nothing. So the gate list is numbered,
   indented and reads downward, and the number is part of the teaching rather than
   decoration.

   THE EMPTY CELL. The published report exhibit has to show a column that is blank
   BY DESIGN rather than blank because something broke, and those two look
   identical if you draw them the same way. So a blank column is drawn with a
   dashed border and carries the words on its face. This is the same decision the
   returning picture took for its refused-at-the-door cells, and it is taken here
   for the same reason.

   Nothing here is below 9px at any width, and every wide row scrolls sideways
   rather than reflowing, which is the pattern the kit file argues for at length
   and this file does not re-argue.                                             */

/* ── 3.1 · ONE RECORD, THREE JOBS ─────────────────────────────────────────── */
.c3l-fields{display:flex;flex-wrap:wrap;gap:6px}
.c3l-f{font-size:12.5px;padding:5px 10px}
.c3l-f.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3l-out{margin-top:14px;border-top:1px solid var(--line);padding-top:13px;min-height:150px}
.c3l-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.c3l-jobs{display:flex;flex-wrap:wrap;gap:9px}
.c3l-j{flex:1 1 190px;background:var(--sur-1);border:1px solid var(--line);border-radius:7px;
  padding:9px 11px}
.c3l-j span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.c3l-j p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.c3l-out>p{margin:11px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3l-out>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}
.c3l-own{color:var(--ink-1)}
.c3l-close{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}

/* ── 3.2 · WHICH GATE FAILED FIRST. THE LADDER. ───────────────────────────── */
.c3g-q p{margin:0 0 11px;font-size:14.5px;line-height:1.55;color:var(--ink-1)}
.c3g-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.c3g-ladder li{margin:0}
.c3g-s{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--sur-1);border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  font-size:13.5px;line-height:1.45;color:var(--ink-2);transition:border-color .12s}
.c3g-s:hover{border-color:var(--st)}
.c3g-s.on{border-color:var(--st);background:var(--sur-2);color:var(--ink-1)}
.c3g-n{font-family:var(--mono);font-size:11px;color:var(--ink-4);flex:0 0 auto;padding-top:1px}
.c3g-ladder li:nth-child(1) .c3g-s{margin-left:0}
.c3g-ladder li:nth-child(2) .c3g-s{margin-left:9px}
.c3g-ladder li:nth-child(3) .c3g-s{margin-left:18px}
.c3g-ladder li:nth-child(4) .c3g-s{margin-left:27px}
.c3g-ladder li:nth-child(5) .c3g-s{margin-left:36px}
.c3g-ladder li:nth-child(6) .c3g-s{margin-left:45px}
.c3g-ladder li:nth-child(7) .c3g-s{margin-left:54px;border-style:dashed}
.c3g-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:96px}
.c3g-out p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3g-out p:last-child{margin-bottom:0}
.c3g-out 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}
.c3g-prompt{color:var(--ink-3)}
.c3g-gate{color:var(--ink-1)}

.c3g-cols{margin-top:16px;border-top:1px solid var(--line-2);padding-top:14px}
.c3g-party{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:11px}
.c3g-plab{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.c3g-p{font-size:12.5px;padding:5px 10px}
.c3g-p.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3g-grid{display:flex;flex-wrap:wrap;gap:7px}
.c3g-col{flex:1 1 168px;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px}
.c3g-col b{display:block;font-size:13px;color:var(--ink-1)}
.c3g-col em{display:block;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;font-style:normal;color:#8fc890;margin:3px 0 5px}
.c3g-col p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.c3g-col.empty{border-style:dashed;border-color:var(--line-2);background:transparent}
.c3g-col.empty em{color:var(--warn)}
.c3g-col.empty b,.c3g-col.empty p{opacity:.62}
.c3g-scores,.c3g-who{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3g-who{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}

/* ── 3.3 · HOLDING THE BUTTON ─────────────────────────────────────────────── */
.c3b-qs{display:flex;flex-direction:column;gap:5px}
.c3b-q{text-align:left;font-size:13px;padding:6px 10px;line-height:1.4}
.c3b-q.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3b-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.c3b-verdict{display:inline-block;font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-bottom:10px}
.c3b-verdict.ok{background:rgba(159,214,160,.16);color:#8fc890}
.c3b-verdict.no{background:rgba(240,194,116,.16);color:#e0b46a}
.c3b-page{border-left:2px solid var(--line-2);padding:0 0 0 11px;margin-bottom:11px}
.c3b-page b{display:block;font-size:13.5px;color:var(--ink-1)}
.c3b-page em{display:block;font-family:var(--mono);font-size:10.5px;font-style:normal;
  color:var(--ink-4);margin:2px 0 5px}
.c3b-page p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.c3b-dating,.c3b-stale,.c3b-durable{margin:11px 0 0;font-size:14px;line-height:1.55;
  color:var(--ink-2)}
.c3b-durable{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}

/* ── 3.4 · THE FOLKLORE REGISTER ──────────────────────────────────────────── */
.c3f-prog{display:flex;justify-content:space-between;font-family:var(--ui);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.c3f-claim p{margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--ink-1)}
.c3f-opts{display:flex;flex-wrap:wrap;gap:6px}
.c3f-o{font-size:12.5px;padding:6px 11px}
.c3f-o.right{border-color:#8fc890;background:rgba(159,214,160,.14);color:#8fc890}
.c3f-o.wrong{border-color:var(--warn);background:rgba(240,194,116,.12);color:#e0b46a}
.c3f-o[disabled]{cursor:default}
.c3f-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:96px}
.c3f-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.c3f-w{margin:0 0 11px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.c3f-so{margin:0;background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3f-next{font-size:12.5px}
.c3f-four{margin-top:15px;border-top:1px solid var(--line-2);padding-top:12px}
.c3f-four>span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.c3f-four ol{margin:0 0 8px;padding-left:20px}
.c3f-four li{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-bottom:3px}
.c3f-four p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}

/* ── 3.5 · THE LOOP ───────────────────────────────────────────────────────── */
.c3o-ring{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c3o-ring li{flex:1 1 168px;background:var(--sur-1);border:1px solid var(--line);
  border-radius:6px;padding:8px 10px}
.c3o-ring li b{display:block;font-size:13px;color:var(--ink-1);margin-bottom:3px}
.c3o-ring li span{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.c3o-back{border-style:dashed!important;border-color:var(--st)!important}
.c3o-pick{display:flex;flex-wrap:wrap;gap:6px}
.c3o-c{font-size:12.5px;padding:5px 10px}
.c3o-c.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3o-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:150px}
.c3o-out p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3o-out p:last-child{margin-bottom:0}
.c3o-out 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}
.c3o-grade{color:var(--ink-1)}
.c3o-launch{margin:13px 0 0;background:var(--sur-2);border-left:3px solid var(--st);
  padding:9px 11px;border-radius:0 5px 5px 0;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* ── 3.6 · THE WEEK BUILDER ───────────────────────────────────────────────── */
.c3s-in{display:flex;flex-wrap:wrap;gap:14px}
.c3s-lab{flex:1 1 240px;display:flex;flex-direction:column;gap:5px;font-family:var(--ui);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.c3s-lab input{width:100%}
.c3s-lab b{font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ink-1)}
.c3s-plan{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.c3s-p{font-size:12.5px;padding:5px 10px}
.c3s-p.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3s-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.c3s-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.c3s-big b{font-family:var(--mono);font-size:30px;line-height:1;color:var(--st)}
.c3s-big span{font-size:13.5px;color:var(--ink-3);max-width:320px}
.c3s-sum{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.c3s-warn{margin:0 0 10px;background:var(--sur-2);border-left:3px solid var(--warn);
  padding:9px 11px;border-radius:0 5px 5px 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3s-warn span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c3s-close{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3s-rules{margin-top:15px;border-top:1px solid var(--line-2);padding-top:12px}
.c3s-rlab{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.c3s-r{font-size:12.5px;padding:5px 10px;margin:0 5px 5px 0}
.c3s-r.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3s-rd{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c3s-ladder{margin-top:15px;border-top:1px solid var(--line-2);padding-top:12px}
.c3s-ladder>span{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.c3s-ladder>div{display:flex;flex-wrap:wrap;gap:7px}
.c3s-l{flex:1 1 168px;background:var(--sur-1);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px}
.c3s-l b{display:block;font-size:13px;color:var(--ink-1)}
.c3s-l em{display:block;font-family:var(--mono);font-size:15px;font-style:normal;color:var(--st);
  margin:2px 0 4px}
.c3s-l span{font-size:12px;line-height:1.45;color:var(--ink-3)}
.c3s-ladder>p{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ── 3.7 · THE PATHS ──────────────────────────────────────────────────────── */
.c3r-picks{display:flex;flex-wrap:wrap;gap:6px}
.c3r-c{font-size:12.5px;padding:5px 10px}
.c3r-c.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3r-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:120px}
.c3r-out p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3r-out p:last-child{margin-bottom:0}
.c3r-out 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}
.c3r-prompt{color:var(--ink-3)}
.c3r-n{background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;
  border-radius:0 5px 5px 0}
.c3r-rules{margin-top:16px;border-top:1px solid var(--line-2);padding-top:13px}
.c3r-rlab{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.c3r-rbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.c3r-r{font-size:12.5px;padding:5px 10px}
.c3r-r.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3r-rout p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3r-sharp{color:var(--ink-1)}
.c3r-stop{margin:11px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3);font-style:italic}

/* ── 3.8 · THE PRICE LEVER ────────────────────────────────────────────────── */
.c3p-fbar{display:flex;flex-wrap:wrap;gap:6px}
.c3p-f{font-size:12.5px;padding:5px 10px}
.c3p-f.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3p-fout{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:120px}
.c3p-fout p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.c3p-fout p:last-child{margin-bottom:0}
.c3p-fout 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}
.c3p-week{margin-top:16px;border-top:1px solid var(--line-2);padding-top:13px}
.c3p-wlab{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.c3p-acts{display:flex;flex-wrap:wrap;gap:6px}
.c3p-a{font-size:12.5px;padding:5px 10px}
.c3p-a.mine{border-style:solid;border-color:var(--line-2)}
.c3p-a.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c3p-tally{margin-top:12px;min-height:70px}
.c3p-prompt{margin:0;font-size:14px;color:var(--ink-3)}
.c3p-count{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--ink-1)}
.c3p-count b{font-family:var(--mono);color:var(--st)}
.c3p-row{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--ink-3);
  border-left:2px solid var(--line-2);padding-left:10px}
.c3p-row span{display:block;font-size:13px;color:var(--ink-1);font-weight:600}
.c3p-row b{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.05em;
  color:var(--ink-4);margin:1px 0 3px;font-weight:400}
.c3p-close{margin:13px 0 0;background:var(--sur-2);border-left:3px solid var(--st);
  padding:9px 11px;border-radius:0 5px 5px 0;font-size:14px;line-height:1.55;color:var(--ink-2)}

@media (max-width:640px){
  .c3g-ladder li .c3g-s{margin-left:0!important}
  .c3g-n{display:none}
  .c3s-big b{font-size:26px}
}