/* CONNECTED RETAIL MEDIA, chapter 7 styles. Proving it.

   Five 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 ONE THING WORTH READING BEFORE EDITING. Two exhibits in this chapter carry
   a verdict that changes colour: the power simulator, which turns from green to
   amber the moment a design stops being able to see the effect it is looking
   for, and the bridge, which draws two lines that can never be filled in. Both
   colour changes are the teaching rather than decoration. Do not restyle the
   amber state into something a reader skims past, and do not fill in the blank
   lines with a placeholder figure.                                           */

/* ── 7.1 · ONE COMMITTED DOLLAR ───────────────────────────────────────────── */
.c7c-dollar{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;border-radius:0 5px 5px 0}
.c7c-doors{display:flex;flex-wrap:wrap;gap:6px}
.c7c-d{flex:1 1 170px;text-align:left;font-size:12.5px;padding:7px 10px;display:flex;
  flex-direction:column;gap:4px}
.c7c-d.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c7c-d b{font-size:13px;line-height:1.35;color:var(--ink-1)}
.c7c-ev{font-family:var(--ui);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4)}
.c7c-ev.ok{color:#8fc890}
.c7c-ev.part{color:var(--ink-3)}
.c7c-ev.no{color:#e0b46a}
.c7c-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;min-height:118px}
.c7c-out h6{margin:0 0 7px;font-size:14.5px;color:var(--ink-1)}
.c7c-out p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c7c-out p:last-child{margin-bottom:0}
.c7c-prompt{color:var(--ink-3) !important}
.c7c-evd span,.c7c-who span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c7c-evd{background:var(--sur-2);padding:9px 11px;border-radius:0 5px 5px 0;
  border-left:3px solid var(--line-2)}
.c7c-evd.ok{border-left-color:#8fc890}
.c7c-evd.no{border-left-color:var(--warn)}
.c7c-unit{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.c7c-ulab{width:100%;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.c7c-u{font-size:12.5px;padding:5px 11px}
.c7c-u.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c7c-ud{width:100%;margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c7c-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}

/* ── 7.2 · FIVE QUESTIONS ─────────────────────────────────────────────────── */
.c7e-items{display:flex;flex-wrap:wrap;gap:6px}
.c7e-i{flex:1 1 186px;text-align:left;font-size:12.5px;padding:7px 10px;display:flex;
  flex-direction:column;gap:3px}
.c7e-i.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c7e-i b{font-size:13px;color:var(--ink-1)}
.c7e-i span{font-size:11.5px;line-height:1.4;color:var(--ink-4)}
.c7e-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.c7e-t{width:100%;border-collapse:collapse}
.c7e-t th{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-1);font-weight:600;width:56%}
.c7e-t th span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--ink-4);
  font-weight:400}
.c7e-t td{vertical-align:top;padding:8px 0;border-top:1px solid var(--line);font-size:13px;
  line-height:1.5;color:var(--ink-2)}
.c7e-v{margin:11px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);padding:9px 11px;
  border-radius:0 5px 5px 0;background:var(--sur-2);border-left:3px solid var(--line-2)}
.c7e-v.ok{border-left-color:#8fc890}
.c7e-v.no{border-left-color:var(--warn)}
.c7e-v span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c7e-tierbar{margin-top:13px}
.c7e-tb{font-size:12.5px;padding:6px 11px}
.c7e-tiers:not(:empty){margin-top:12px;border:1px dashed var(--line-2);border-radius:7px;
  padding:11px 12px}
.c7e-tiers h6{margin:0 0 9px;font-size:14px;color:var(--ink-1)}
.c7e-tier{display:flex;flex-wrap:wrap;gap:7px}
.c7e-r{flex:1 1 168px;border:1px solid var(--line);border-radius:7px;padding:9px 10px;
  background:var(--sur-1);display:flex;flex-direction:column;gap:3px}
.c7e-r.ok{border-color:rgba(159,214,160,.5)}
.c7e-r.no{border-color:rgba(240,194,116,.5)}
.c7e-r b{font-size:13px;color:var(--ink-1)}
.c7e-r em{font-style:normal;font-family:var(--ui);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.c7e-r span{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.c7e-tn{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ── 7.3 · THE ARITHMETIC ─────────────────────────────────────────────────── */
.c7p-pre{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:13px}
.c7p-plab{width:100%;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.c7p-p{font-size:12px;padding:5px 10px}
.c7p-dials{display:flex;flex-direction:column;gap:9px}
.c7p-lab{display:grid;grid-template-columns:1fr 132px 84px;gap:9px;align-items:center;
  font-size:13px;color:var(--ink-2)}
.c7p-lab input[type=range]{width:100%}
.c7p-lab b{font-family:var(--mono);font-size:13px;color:var(--ink-1);text-align:right}
.c7p-out{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.c7p-big{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:7px;
  border:1px solid var(--line);background:var(--sur-1);margin-bottom:11px}
.c7p-big.ok{border-color:rgba(159,214,160,.5);background:rgba(159,214,160,.07)}
.c7p-big.no{border-color:rgba(240,194,116,.5);background:rgba(240,194,116,.07)}
.c7p-big b{font-size:26px;line-height:1.1;color:var(--ink-1)}
.c7p-big span{font-size:13px;line-height:1.5;color:var(--ink-3)}
.c7p-work,.c7p-verdict,.c7p-f{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c7p-f{margin-bottom:0;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:11px}
.c7p-work span,.c7p-verdict span,.c7p-f span{display:block;font-family:var(--ui);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c7p-verdict{padding:9px 11px;border-radius:0 5px 5px 0;background:var(--sur-2);
  border-left:3px solid var(--line-2)}
.c7p-verdict.ok{border-left-color:#8fc890}
.c7p-verdict.no{border-left-color:var(--warn)}
.c7p-lessons{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.c7p-llab{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.c7p-lessons p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c7p-lessons p:last-child{margin-bottom:0}

/* ── 7.4 · TWO PUBLISHED RANKINGS ─────────────────────────────────────────── */
.c7r-ms{display:flex;flex-wrap:wrap;gap:6px}
.c7r-m{flex:1 1 176px;text-align:left;font-size:12.5px;padding:6px 10px}
.c7r-m.on{border-left:3px solid var(--st);background:var(--sur-2)}
.c7r-out{margin-top:13px;border-top:1px solid var(--line);padding-top:12px}
.c7r-two{display:flex;flex-wrap:wrap;gap:9px}
.c7r-side{flex:1 1 236px;border:1px solid var(--line);border-radius:7px;padding:10px 11px;
  background:var(--sur-1)}
.c7r-side.ok{border-color:rgba(159,214,160,.5)}
.c7r-side.no{border-color:rgba(240,194,116,.5)}
.c7r-side h6{margin:0 0 3px;font-size:14px;color:var(--ink-1)}
.c7r-when{margin:0 0 8px;font-family:var(--ui);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4)}
.c7r-rank{margin:0 0 9px;font-size:15px;font-weight:600;color:var(--ink-1)}
.c7r-rank.ok{color:#8fc890}
.c7r-rank.no{color:#e0b46a}
.c7r-q{margin:0 0 9px;padding:8px 11px;border-left:3px solid var(--st);background:var(--sur-2);
  border-radius:0 5px 5px 0;font-size:13.5px;line-height:1.55;color:var(--ink-1)}
.c7r-d{margin:0 0 9px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c7r-who,.c7r-binds{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.c7r-binds{margin-bottom:0}
.c7r-who span,.c7r-binds span{display:block;font-family:var(--ui);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c7r-use{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(--st);padding:9px 11px;border-radius:0 5px 5px 0}
.c7r-use span{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}

/* ── 7.5 · THE BRIDGE ─────────────────────────────────────────────────────── */
.c7b-start{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.c7b-start b{display:block;font-size:22px;color:var(--ink-1);margin-bottom:3px}
.c7b-yours{display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);
  padding-top:12px}
.c7b-ylab{font-family:var(--ui);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.c7b-lab{display:grid;grid-template-columns:1fr 128px 86px;gap:9px;align-items:center;
  font-size:13px;color:var(--ink-2)}
.c7b-lab input[type=range]{width:100%}
.c7b-lab b{font-family:var(--mono);font-size:13px;color:var(--ink-1);text-align:right}
.c7b-lab span{grid-column:1 / -1;font-size:12.5px;line-height:1.45;color:var(--ink-4)}
.c7b-calc{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.c7b-step{display:grid;grid-template-columns:1fr 128px;gap:9px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--line)}
.c7b-step:first-child{border-top:none}
.c7b-step.last{border-top:2px solid var(--line-2)}
.c7b-step span{font-size:13px;color:var(--ink-2)}
.c7b-step b{font-family:var(--mono);font-size:16px;color:var(--ink-1);text-align:right}
.c7b-step em{grid-column:1 / -1;font-style:normal;font-size:12.5px;line-height:1.45;
  color:var(--ink-4)}
.c7b-note{margin:11px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--st);padding:9px 11px;border-radius:0 5px 5px 0}
.c7b-lines{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.c7b-llab{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.c7b-l{border:1px solid var(--line);border-radius:7px;margin-bottom:6px;background:var(--sur-1)}
.c7b-l.on{border-color:var(--st)}
.c7b-l.blank{border-style:dashed}
.c7b-b{width:100%;text-align:left;border:none;background:none;padding:9px 11px;display:flex;
  flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:space-between}
.c7b-b b{font-size:13px;color:var(--ink-1)}
.c7b-b em{font-style:normal;font-family:var(--ui);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.c7b-d{margin:0 11px 8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.c7b-fill{margin:0 11px 10px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--sur-2);border-left:3px solid var(--st);padding:8px 10px;border-radius:0 5px 5px 0}
.c7b-fill.blank{border-left-color:var(--warn)}
.c7b-fill span{display:block;font-family:var(--ui);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.c7b-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}

@media (max-width:640px){
  .c7p-lab,.c7b-lab{grid-template-columns:1fr 72px}
  .c7p-lab input[type=range],.c7b-lab input[type=range]{grid-column:1 / -1}
  .c7c-d,.c7e-i,.c7r-m{flex:1 1 100%}
  .c7e-t th{width:50%}
}