/* CONNECTED RETAIL MEDIA, chapter 8 styles. Several runs at once.

   Nine components, and the rule the kit file sets applies to all of them: 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.

   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 TWO THINGS WORTH READING BEFORE EDITING ─────────────────────────────

   ONE. THREE OF THESE EXHIBITS CAN LEGITIMATELY BE EMPTY. `retailwords`,
   `retailimposs` and `retailconnect` build their rows from what other chapters
   declared, and an empty state means those chapters are absent. `.c8w-none`,
   `.c8i-absent` and `.c8c-empty` are that state and they are styled to be READ
   rather than skipped. Do not restyle them into a muted placeholder, and never
   fill one with an example row, because the emptiness is the teaching.

   TWO. THE RIGHT AND WRONG STATES ON THE SORTING EXHIBITS ARE NOT DECORATION.
   `.right` and `.wrong` appear on four components and each marks a call the
   reader made before they were told. Keeping them visible after the reveal is
   what makes the exercise a decision rather than a click.                     */

/* ── SHARED, BECAUSE FIVE OF THE NINE SORT SOMETHING ──────────────────────── */
.c8f-o.right,.c8b-o.right,.c8y-o.right,.c8p-pb.right,.c8c-s.right{
  border-left:3px solid #8fc890;background:var(--sur-2)}
.c8f-o.wrong,.c8b-o.wrong,.c8y-o.wrong,.c8p-pb.wrong,.c8c-s.wrong{
  border-left:3px solid var(--warn);opacity:.85}

/* ── 8.1 · THREE REPORTS, AND THE WORDS THEY SHARE ────────────────────────── */
.c8w-ex{display:flex;flex-wrap:wrap;gap:8px}
.c8w-x{flex:1 1 210px;border:1px solid var(--line);border-radius:7px;padding:10px 11px}
.c8w-x h6{margin:0 0 3px;font-size:13.5px;color:var(--ink-1)}
.c8w-xd{margin:0 0 8px;font-size:11.5px;line-height:1.4;color:var(--ink-4)}
.c8w-r{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--line);padding:6px 0;cursor:pointer}
.c8w-r:hover{background:var(--sur-2)}
.c8w-r.on{background:var(--sur-2);border-left:3px solid var(--st);padding-left:7px}
.c8w-r.seen .c8w-w{color:var(--ink-2)}
.c8w-w{font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.c8w-v{font-size:12.5px;color:var(--ink-1);font-weight:600;white-space:nowrap}
.c8w-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:112px}
.c8w-out h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.c8w-prompt{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.c8w-where,.c8w-dlab{margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8w-where span,.c8w-dec span,.c8w-bec span{display:block;font-family:var(--ui);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8w-dlab{font-family:var(--ui);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.c8w-d{border-left:3px solid var(--line-2);background:var(--sur-2);border-radius:0 5px 5px 0;
  padding:9px 11px;margin-bottom:8px}
.c8w-at{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.c8w-d p{margin:0 0 7px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8w-d p:last-child{margin-bottom:0}
.c8w-ab b{color:var(--ink-1)}
.c8w-none{border-left:3px solid var(--warn);background:var(--sur-2);border-radius:0 5px 5px 0;
  padding:10px 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c8w-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.2 · FOUR REASONS A COMPARISON IS IMPOSSIBLE ────────────────────────── */
.c8f-key{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.c8f-c{flex:1 1 168px;border:1px solid var(--line);border-radius:7px;padding:9px 10px;
  display:flex;flex-direction:column;gap:4px}
.c8f-c b{font-size:13px;color:var(--ink-1)}
.c8f-c span{font-size:12px;line-height:1.45;color:var(--ink-3)}
.c8f-c em{font-size:11.5px;line-height:1.4;color:var(--ink-4);font-style:normal;
  border-top:1px solid var(--line);padding-top:5px}
.c8f-x{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}
.c8f-x h6{margin:0 0 5px;font-size:14px;color:var(--ink-1)}
.c8f-xd{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c8f-opts{display:flex;flex-wrap:wrap;gap:5px}
.c8f-o{font-size:12px;padding:5px 10px}
.c8f-ans,.c8f-rem{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;
  padding:9px 11px}
.c8f-ans span,.c8f-rem span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8f-rem b{display:block;margin-top:4px;color:var(--ink-3);font-weight:400}
.c8f-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.3 · ONE WEEK, THREE NETWORKS ───────────────────────────────────────── */
.c8b-grid{display:flex;flex-wrap:wrap;gap:8px}
.c8b-n{flex:1 1 214px;border:1px solid var(--line);border-radius:7px;padding:10px 11px}
.c8b-n.done{border-color:var(--line-2)}
.c8b-n h6{margin:0 0 3px;font-size:13.5px;color:var(--ink-1)}
.c8b-nd{margin:0 0 8px;font-size:11.5px;line-height:1.4;color:var(--ink-4)}
.c8b-m{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);
  padding:5px 0;font-size:12.5px}
.c8b-m span{color:var(--ink-3)}
.c8b-m b{color:var(--ink-1);white-space:nowrap}
.c8b-v{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.c8b-o{font-size:12px;padding:5px 9px;flex:1 1 auto}
.c8b-why,.c8b-do{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.c8b-do span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8b-log{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.c8b-log h6{margin:0 0 9px;font-size:14.5px;color:var(--ink-1)}
.c8b-wait{margin:0;font-size:13.5px;color:var(--ink-3)}
.c8b-e{border-top:1px solid var(--line);padding:8px 0;font-size:13px;line-height:1.5;
  color:var(--ink-2)}
.c8b-d{display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--st);margin-bottom:3px}
.c8b-ent,.c8b-lim{margin:11px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;
  padding:9px 11px}
.c8b-lim{border-left-color:var(--warn)}
.c8b-reg:not(:empty){margin-top:14px;border:1px dashed var(--line-2);border-radius:7px;
  padding:11px 12px}
.c8b-reg h6{margin:0 0 9px;font-size:14px;color:var(--ink-1)}
.c8b-cols{display:flex;flex-wrap:wrap;gap:7px}
.c8b-col{flex:1 1 160px;border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.c8b-col b{display:block;font-size:12.5px;color:var(--ink-1);margin-bottom:3px}
.c8b-col span{font-size:11.5px;line-height:1.45;color:var(--ink-4)}
.c8b-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.4 · THREE CALENDARS ────────────────────────────────────────────────── */
.c8k-set{margin-bottom:12px}
.c8k-lab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
.c8k-sel{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line-2);
  border-radius:5px;background:var(--sur-2);color:var(--ink-1)}
.c8k-fis{display:flex;flex-wrap:wrap;gap:7px}
.c8k-f{flex:1 1 208px;border:1px solid var(--line);border-radius:7px;padding:9px 11px;
  display:flex;flex-direction:column;gap:3px}
.c8k-fd{font-family:var(--ui);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--st)}
.c8k-f b{font-size:13px;color:var(--ink-1)}
.c8k-off,.c8k-neg{font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.c8k-f em{font-size:11.5px;line-height:1.45;color:var(--ink-4);font-style:normal;
  border-top:1px solid var(--line);padding-top:5px;margin-top:2px}
.c8k-fn{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c8k-oth{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;flex-direction:column;gap:7px}
.c8k-ob{width:100%;text-align:left;display:flex;flex-direction:column;gap:3px;padding:8px 11px}
.c8k-ob b{font-size:13px;color:var(--ink-1)}
.c8k-ob span{font-family:var(--ui);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4)}
.c8k-o.on .c8k-ob{border-left:3px solid var(--st);background:var(--sur-2)}
.c8k-od,.c8k-og,.c8k-oc{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);
  padding-left:11px}
.c8k-og span,.c8k-oc span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8k-blocks,.c8k-close{margin:13px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.5 · WHAT THE WEEK IS MADE OF ───────────────────────────────────────── */
.c8y-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.c8y-t{font-size:12.5px;padding:6px 12px}
.c8y-t.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c8y-lede{margin:0 0 11px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c8y-rows{display:flex;flex-wrap:wrap;gap:7px}
.c8y-r{flex:1 1 196px;border:1px solid var(--line);border-radius:7px;padding:9px 11px;
  display:flex;flex-direction:column;gap:3px}
.c8y-r b{font-size:13px;color:var(--ink-1)}
.c8y-r .c8y-v{font-family:var(--ui);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--st)}
.c8y-r .c8y-d{font-size:11.5px;line-height:1.45;color:var(--ink-4)}
.c8y-twist{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;
  padding:10px 12px}
.c8y-key{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.c8y-k{flex:1 1 168px;border:1px dashed var(--line-2);border-radius:6px;padding:8px 10px;
  font-size:11.5px;line-height:1.45;color:var(--ink-4)}
.c8y-k b{display:block;font-size:12.5px;color:var(--ink-1);margin-bottom:3px}
.c8y-x{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}
.c8y-xt{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--ink-1)}
.c8y-opts{display:flex;flex-wrap:wrap;gap:5px}
.c8y-o{font-size:12px;padding:5px 10px}
.c8y-ans{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--sur-2);
  border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;padding:9px 11px}
.c8y-ans span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8y-inv,.c8y-war{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}
.c8y-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.6 · EIGHT THAT WORK, FOUR THAT DO NOT ──────────────────────────────── */
.c8a-filt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.c8a-f{font-size:12px;padding:5px 11px}
.c8a-f.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c8a-fd{width:100%;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-4)}
.c8a-list{display:flex;flex-wrap:wrap;gap:6px}
.c8a-i{flex:1 1 200px;text-align:left;font-size:12.5px;padding:8px 10px;display:flex;
  flex-direction:column;gap:3px}
.c8a-i b{font-size:12.5px;line-height:1.4;color:var(--ink-1)}
.c8a-i span{font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4)}
.c8a-i.work span{color:#8fc890}
.c8a-i.no span{color:#e0b46a}
.c8a-i.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c8a-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:104px}
.c8a-out h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.c8a-out h6.no{color:var(--warn)}
.c8a-prompt{margin:0;font-size:13.5px;color:var(--ink-3)}
.c8a-out p{margin:0 0 9px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8a-out p:last-child{margin-bottom:0}
.c8a-out p span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8a-o{background:var(--sur-2);border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;
  padding:9px 11px}
.c8a-honest,.c8a-close{margin:13px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.7 · FOUR PRODUCT PAGES ─────────────────────────────────────────────── */
.c8i-pages{display:flex;flex-direction:column;gap:7px}
.c8i-pb{width:100%;text-align:left;padding:9px 11px}
.c8i-pb b{font-size:13.5px;color:var(--ink-1)}
.c8i-p.on .c8i-pb{border-left:3px solid var(--st);background:var(--sur-2)}
.c8i-page{margin:9px 0 0 11px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:6px;
  font-size:13px;line-height:1.6;color:var(--ink-3);font-style:italic}
.c8i-show{margin:9px 0 0 11px;font-size:12.5px;padding:6px 12px}
.c8i-real,.c8i-tell,.c8i-inst{margin:9px 0 0 11px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8i-real span,.c8i-tell span,.c8i-inst span,.c8i-decl span{display:block;font-family:var(--ui);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8i-decl{margin:9px 0 0 11px;background:var(--sur-2);border-left:3px solid var(--line-2);
  border-radius:0 5px 5px 0;padding:9px 11px}
.c8i-decl p{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.c8i-decl p:last-child{margin-bottom:0}
.c8i-scope{color:var(--ink-4) !important;font-size:11.5px !important}
.c8i-absent{margin:9px 0 0 11px;background:var(--sur-2);border-left:3px solid var(--warn);
  border-radius:0 5px 5px 0;padding:9px 11px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8i-quote,.c8i-arith,.c8i-breach{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.c8i-quote h6,.c8i-arith h6,.c8i-breach h6{margin:0 0 8px;font-size:14px;color:var(--ink-1)}
.c8i-q{margin:0;padding:10px 12px;background:var(--sur-2);border-left:3px solid var(--st);
  border-radius:0 5px 5px 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.c8i-src{margin:6px 0 0;font-size:11.5px;color:var(--ink-4)}
.c8i-qn{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c8i-ar{display:flex;flex-direction:column}
.c8i-arr{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);
  padding:7px 0;font-size:12.5px}
.c8i-arr span{color:var(--ink-3)}
.c8i-arr b{color:var(--ink-1);text-align:right}
.c8i-arn{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c8i-bd{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c8i-bc{margin:0 0 7px;padding:8px 11px;background:var(--sur-2);border-left:3px solid var(--line-2);
  border-radius:0 5px 5px 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.c8i-br{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c8i-bok,.c8i-bno{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);
  padding:9px 11px;border-radius:0 5px 5px 0;background:var(--sur-2);
  border-left:3px solid #8fc890}
.c8i-bno{border-left-color:var(--warn)}
.c8i-bok span,.c8i-bno span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8i-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.8 · EIGHT LINES, TWO SIGNATURES ────────────────────────────────────── */
.c8p-brand{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c8p-lines{display:flex;flex-direction:column;gap:8px}
.c8p-l{border:1px solid var(--line);border-radius:7px;padding:9px 11px}
.c8p-l.keep{border-left:3px solid #8fc890}
.c8p-l.cut{border-left:3px solid var(--warn);opacity:.9}
.c8p-lt{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--ink-1)}
.c8p-pots{display:flex;flex-wrap:wrap;gap:5px}
.c8p-pb{font-size:12px;padding:5px 10px}
.c8p-pd,.c8p-v{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;
  padding:8px 11px}
.c8p-v.keep{border-left-color:#8fc890}
.c8p-v.cut{border-left-color:var(--warn)}
.c8p-pd span,.c8p-v span,.c8p-keeps span,.c8p-cuts span{display:block;font-family:var(--ui);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8p-chairs{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;flex-wrap:wrap;gap:7px}
.c8p-clab{width:100%;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.c8p-wait{margin:0;font-size:13.5px;color:var(--ink-3)}
.c8p-cb{flex:1 1 232px;text-align:left;padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.c8p-cb b{font-size:13px;color:var(--ink-1)}
.c8p-cb span{font-size:11.5px;line-height:1.45;color:var(--ink-4)}
.c8p-cb.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c8p-out:not(:empty){margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.c8p-out h6{margin:0 0 8px;font-size:14.5px;color:var(--ink-1)}
.c8p-keeps,.c8p-cuts{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8p-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── 8.9 · WHAT YOU TAKE OUT ──────────────────────────────────────────────── */
.c8c-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.c8c-t{font-size:12.5px;padding:6px 12px}
.c8c-t.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c8c-td{width:100%;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-4)}
.c8c-chs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.c8c-ch{font-size:11.5px;padding:4px 10px}
.c8c-ch.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c8c-r,.c8c-n,.c8c-o{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.c8c-ab{margin:0 0 7px;font-size:13.5px;line-height:1.5;color:var(--ink-1)}
.c8c-ab em{font-style:normal;color:var(--ink-4);font-family:var(--ui);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:0 4px}
.c8c-dec,.c8c-looks,.c8c-isnt,.c8c-cost,.c8c-sa,.c8c-own,.c8c-scope{margin:0 0 8px;font-size:13px;
  line-height:1.5;color:var(--ink-2)}
.c8c-dec span,.c8c-looks span,.c8c-isnt span,.c8c-cost span,.c8c-sa span,.c8c-own span,
.c8c-scope span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c8c-isnt{background:var(--sur-2);border-left:3px solid var(--line-2);border-radius:0 5px 5px 0;
  padding:9px 11px}
.c8c-ot{margin:0 0 8px;font-size:13.5px;color:var(--ink-1);font-weight:600}
.c8c-steps{display:flex;flex-wrap:wrap;gap:4px}
.c8c-s{font-size:12px;padding:5px 11px;min-width:36px}
.c8c-empty{margin:0;padding:9px 11px;background:var(--sur-2);border-left:3px solid var(--warn);
  border-radius:0 5px 5px 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.c8c-scope{color:var(--ink-4)}
.c8c-gaps{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;flex-wrap:wrap;gap:7px}
.c8c-gaps>span{width:100%;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.c8c-g{flex:1 1 170px;border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.c8c-g b{display:block;font-size:12.5px;color:var(--ink-1);margin-bottom:3px}
.c8c-g span{font-size:11.5px;line-height:1.45;color:var(--ink-4)}
.c8c-close{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}

/* ── NARROW SCREENS ───────────────────────────────────────────────────────── */
@media (max-width:640px){
  .c8w-x,.c8b-n,.c8k-f,.c8y-r,.c8a-i,.c8p-cb{flex:1 1 100%}
  .c8f-c,.c8y-k,.c8b-col,.c8c-g{flex:1 1 100%}
  .c8i-page,.c8i-real,.c8i-tell,.c8i-inst,.c8i-decl,.c8i-absent,.c8i-show{margin-left:0}
  .c8k-od,.c8k-og,.c8k-oc{padding-left:0}
}