/* ==========================================================================
   Connected Social, chapter 5: what you are allowed to find out.

   Nothing here introduces a colour. Every value is a variable already declared
   in academy.css.

   MOTION IS OPT IN. Every transition below sits inside .s5-motion, which the
   components add only when the reader has not asked for reduced motion. A
   component that animates by default and switches it off later has already
   moved something.

     sViews     vw-   one clip, eight published rules
     sAudit     au-   who lets somebody else check the counting
     sPayload   pl-   build one event and see what gets refused
     sSandbox   sx-   kept, or taken out
     sCredit    cr-   one sale, three claims
     sEstimate  es-   counted, estimated, or nobody says
     sPower     pw-   design the test, and be refused
     sRefs      rf-   what would settle this
   ========================================================================== */

/* ------------------------------------------------------------ shared ----- */
.s5-mark{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.s5-mark.ok{color:var(--money)}
.s5-mark.no{color:var(--warn)}

/* -------------------------------------------------- one clip, eight rules - */
.vw-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.vw-gq{margin:0 0 10px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.vw-gopts{display:flex;flex-wrap:wrap;gap:6px}
.vw-ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;
  padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.vw-sec{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-3)}
.vw-sec input[type=range]{width:100%}
.vw-sv{font-family:var(--mono);font-size:13px;color:var(--ink)}
.vw-checks{display:flex;flex-direction:column;gap:5px}
.vw-checks label{font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.vw-count{margin:12px 0 8px;font-family:var(--ui);font-size:13.5px;color:var(--ink)}
.vw-count b{font-family:var(--mono);color:var(--accent)}
.vw-rows{display:flex;flex-direction:column;gap:5px}
.vw-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.7fr) 84px;gap:9px;
  align-items:center;padding:7px 10px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px}
.s5-motion .vw-row{transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease)}
.vw-row.y{border-color:var(--money);background:color-mix(in srgb,var(--money) 8%,transparent)}
.vw-row.n{opacity:.72}
.vw-p{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-3)}
.vw-t{font-family:var(--ui);font-size:12px;color:var(--ink-2)}
.vw-pub{font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-4)}
.vw-v{font-family:var(--ui);font-size:11.5px;font-weight:600;text-align:right}
.vw-row.y .vw-v{color:var(--money)}
.vw-row.n .vw-v{color:var(--ink-4)}
.vw-imp,.vw-so{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.vw-abs{margin:10px 0 0;font-family:var(--ui);font-size:11px;line-height:1.55;color:var(--ink-4)}

@media (max-width:720px){
  .vw-ctl{grid-template-columns:minmax(0,1fr)}
  .vw-row{grid-template-columns:minmax(0,1fr) auto;row-gap:3px}
  .vw-pub{grid-column:1 / -1}
}

/* ------------------------------------------------ who submits to an audit - */
.au-btns{display:flex;flex-wrap:wrap;gap:6px}
.au-b.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.au-go{display:flex;align-items:center;gap:12px;margin-top:11px}
.au-n{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.au-out{margin-top:13px}
.au-score{margin:0 0 11px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.au-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(6,minmax(0,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.au-gr{display:contents}
.au-gr>span{padding:6px 8px;border-bottom:1px solid var(--line);font-family:var(--ui);
  font-size:11px;line-height:1.4;color:var(--ink-2)}
.au-gh>span{background:var(--bg-3);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-4)}
.au-gr.none .au-name{color:var(--ink-4)}
.au-c{text-align:center;font-size:10.5px}
.au-c.y{color:var(--money)}
.au-c.p{color:var(--open)}
.au-c.n{color:var(--ink-4);background:color-mix(in srgb,var(--warn) 7%,transparent)}
.au-notes{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.au-note{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.au-note b{display:block;font-size:11px;letter-spacing:.03em;color:var(--ink-2)}
.au-traps{margin-top:14px;padding:11px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.au-th{margin:0 0 8px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.au-trap{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.au-trap b{display:block;color:var(--ink-2)}
.au-so{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.au-as{margin:8px 0 0;font-family:var(--ui);font-size:11px;color:var(--ink-4)}

@media (max-width:720px){
  .au-grid{grid-template-columns:minmax(0,1.3fr) repeat(6,minmax(0,0.55fr));font-size:9.5px}
  .au-gr>span{padding:5px 4px}
  .au-gh>span{font-size:8px}
}

/* ------------------------------------------------------ build one event -- */
.pl-build{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.pl-fs{margin:0;padding:10px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.pl-fs legend{padding:0 5px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.pl-side{display:flex;flex-direction:column;gap:12px}
.pl-ids{display:flex;flex-direction:column;gap:7px}
.pl-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;font-family:var(--ui)}
.pl-id input{grid-row:1 / span 2}
.pl-id b{font-size:12px;font-weight:600;color:var(--ink-2)}
.pl-id i{font-size:11px;line-height:1.5;font-style:normal;color:var(--ink-4)}
.pl-o{display:block;font-family:var(--ui);font-size:11.5px;line-height:1.7;color:var(--ink-2)}
.pl-go{display:flex;align-items:center;gap:11px;margin-top:12px;flex-wrap:wrap}
.pl-hint{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.pl-out{margin-top:13px}
.pl-verdict{margin:0 0 10px;font-family:var(--ui);font-size:13.5px;font-weight:600;line-height:1.6}
.pl-verdict.ok{color:var(--money)}
.pl-verdict.no{color:var(--warn)}
.pl-r{padding:9px 11px;margin-bottom:6px;background:var(--bg-2);border:1px solid var(--line);
  border-left-width:3px;border-radius:9px}
.s5-motion .pl-r{transition:border-color var(--t2) var(--ease)}
.pl-r.ok{border-left-color:var(--money)}
.pl-r.no{border-left-color:var(--warn)}
.pl-rt{margin:0;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2)}
.pl-rp{margin:3px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-4)}
.pl-rv{margin:5px 0 0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink)}
.pl-r.ok .pl-rv{color:var(--money)}
.pl-why{margin:11px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink)}
.pl-caps{margin:11px 0 0;font-family:var(--ui);font-size:11px;line-height:1.6;color:var(--ink-4)}

@media (max-width:720px){ .pl-build{grid-template-columns:minmax(0,1fr)} }

/* -------------------------------------------------------- kept or taken -- */
.sx-rows{display:flex;flex-direction:column;gap:6px}
.sx-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.sx-r.right{border-color:var(--money)}
.sx-r.wrong{border-color:var(--warn)}
.sx-t{font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.sx-b{display:flex;gap:5px}
.sx-b .btn{padding:4px 10px;font-size:11px;height:auto}
.sx-b .btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.sx-a{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.03em;min-width:66px;
  text-align:right}
.sx-a.y{color:var(--money)}
.sx-a.x{color:var(--warn)}
.sx-note{grid-column:1 / -1;margin-top:3px;padding-top:6px;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.sx-go{display:flex;align-items:center;gap:12px;margin-top:11px}
.sx-n{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.sx-out{margin-top:13px}
.sx-score{margin:0 0 10px;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.sx-ans,.sx-ins{margin:0 0 10px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.sx-hon{margin:0 0 8px;padding:9px 11px;background:var(--bg-2);border:1px dashed var(--line-2);
  border-radius:10px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.sx-as{margin:0;font-family:var(--ui);font-size:11px;color:var(--ink-4)}

@media (max-width:720px){
  .sx-r{grid-template-columns:minmax(0,1fr) auto}
  .sx-a{grid-column:2}
}

/* ------------------------------------------------- one sale, three claims - */
.cr-week{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px}
.cr-d{display:grid;grid-template-columns:82px 74px minmax(0,1fr);gap:9px;align-items:center;
  padding:7px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px}
.cr-d.sale{border-color:var(--accent);background:var(--accent-soft)}
.cr-d b{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.cr-d i{font-family:var(--ui);font-size:11px;font-style:normal;letter-spacing:.03em;
  color:var(--ink-3)}
.cr-d span{font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--ink-4)}
.cr-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.cr-q{margin:0 0 9px;font-family:var(--ui);font-size:13px;color:var(--ink)}
.cr-opts{display:flex;flex-wrap:wrap;gap:6px}
.cr-out{margin-top:13px}
.cr-tot{margin:0 0 11px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.cr-tot b{font-family:var(--mono);color:var(--warn)}
.cr-c{padding:9px 11px;margin-bottom:6px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px}
.cr-cp{margin:0;display:flex;align-items:baseline;gap:7px}
.cr-cp b{font-family:var(--ui);font-size:12.5px;color:var(--ink-2)}
.cr-cp span{font-family:var(--ui);font-size:11px;color:var(--ink-4)}
.cr-cr{margin:4px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.cr-cs{margin:5px 0 0;font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.cr-tight{margin-top:11px;padding:10px 12px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:11px}
.cr-tight label{font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2)}
.cr-ts{margin:8px 0 0;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.cr-tcost{margin:6px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.cr-so{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.cr-lh{margin:13px 0 6px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.cr-ladder{margin:0;padding-left:19px;font-family:var(--ui);font-size:12px;line-height:1.7;
  color:var(--ink-3)}
.cr-ladder li{margin-bottom:4px}

@media (max-width:720px){
  .cr-d{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .cr-d span{grid-column:1 / -1}
}

/* ------------------------------------- counted, estimated, or nobody says - */
.es-n{margin:0 0 10px;font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--ink)}
.es-opts{display:flex;flex-wrap:wrap;gap:6px}
.es-o.ok{border-color:var(--money);color:var(--money)}
.es-o.no{border-color:var(--warn);color:var(--warn)}
.es-say{margin-top:11px}
.es-mk{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;font-weight:600}
.es-mk.ok{color:var(--money)}
.es-mk.no{color:var(--warn)}
.es-why{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.es-more{display:flex;align-items:center;gap:12px;margin-top:11px}
.es-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.es-end{margin-top:14px;padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.es-tally,.es-habit,.es-chain{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;
  line-height:1.7;color:var(--ink)}
.es-score{margin:0;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}

/* ------------------------------------------------------- design the test - */
.pw-gate{padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}
.pw-q{margin:0 0 10px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.pw-gopts{display:flex;flex-wrap:wrap;gap:6px}
.pw-after{margin:0 0 12px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.pw-ctl{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start}
.pw-fs{margin:0;padding:10px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.pw-fs legend{padding:0 5px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.pw-b{display:block;font-family:var(--ui);font-size:11.5px;line-height:1.75;color:var(--ink-2)}
.pw-nn{display:flex;flex-direction:column;gap:6px;padding:10px 11px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;font-family:var(--ui);font-size:11px;
  color:var(--ink-4)}
.pw-nn input[type=range]{width:100%}
.pw-nv{font-family:var(--mono);font-size:14px;color:var(--ink)}
.pw-verdict{margin-top:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2)}
.pw-verdict.no{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.pw-verdict.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 8%,transparent)}
/* The band whose published row has no upper bound. Neither a pass nor a refusal,
   because the table simply stops, so it is marked as its own state rather than
   being coloured as one of the other two. */
.pw-verdict.open{border-color:var(--ink-4);border-style:dashed;background:var(--bg-2)}
.pw-vt{margin:0;font-family:var(--ui);font-size:14px;font-weight:600;line-height:1.6;color:var(--ink)}
.pw-vn{margin:7px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.pw-vn b{font-family:var(--mono);color:var(--ink)}
.pw-vf{margin:8px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.pw-bar{position:relative;height:9px;margin:11px 0 5px;background:var(--bg-4);border-radius:5px;
  overflow:hidden}
.pw-bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.s5-motion .pw-bar i{transition:width var(--t3) var(--ease)}
.pw-bar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-2)}
.pw-key{margin:0;font-family:var(--ui);font-size:10.5px;color:var(--ink-4)}
.pw-guides,.pw-threats{margin-top:13px;padding:11px 12px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px}
.pw-gh,.pw-th{margin:0 0 8px;font-family:var(--ui);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.pw-g{margin:0 0 6px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.pw-assume{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);color:var(--ink-2)}
.pw-t{margin:0 0 7px;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.pw-t b{display:block;color:var(--ink-2)}
.pw-by,.pw-arg{margin:12px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

@media (max-width:720px){ .pw-ctl{grid-template-columns:minmax(0,1fr)} }

/* --------------------------------------------------- what would settle it - */
.rf-c{margin:0 0 11px;padding:10px 12px;background:var(--bg-3);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;font-family:var(--ui);font-size:13.5px;line-height:1.6;
  color:var(--ink)}
.rf-opts{display:flex;flex-wrap:wrap;gap:6px}
.rf-o.ok{border-color:var(--money);color:var(--money)}
.rf-o.no{border-color:var(--warn);color:var(--warn)}
.rf-say{margin-top:11px}
.rf-mk{margin:0 0 6px;font-family:var(--ui);font-size:12.5px;font-weight:600}
.rf-mk.ok{color:var(--money)}
.rf-mk.no{color:var(--warn)}
.rf-why{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.rf-more{display:flex;align-items:center;gap:12px;margin-top:11px}
.rf-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.rf-end{margin-top:14px;padding:12px 13px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px}
.rf-score{margin:0 0 9px;font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.rf-f,.rf-i{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--ink)}
.rf-cl{margin:0;font-family:var(--ui);font-size:13px;line-height:1.7;color:var(--ink-2)}