/* ==========================================================================
   Connected Social, chapter 4: when the audience already decided.

   Nothing here introduces a colour.

     sCategories   cat-   which of these can have fans, and which cannot
     sRules        rl-    has anybody had to write a rule
   ========================================================================== */

/* ------------------------------------------------ the sorting exercise --- */
.cat-list{display:flex;flex-direction:column;gap:6px}
.cat-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}
.cat-r.right{border-color:var(--money);background:color-mix(in srgb,var(--money) 8%,transparent)}
.cat-r.wrong{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.cat-t{font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.cat-b{display:flex;gap:5px}
.cat-b .btn{padding:4px 11px;font-size:11.5px;height:auto}
.cat-b .btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.cat-a{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.03em;min-width:30px;
  text-align:right}
.cat-a.y{color:var(--money)}
.cat-a.n{color:var(--open)}
.cat-w{grid-column:1 / -1;margin:2px 0 0;padding-top:7px;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.cat-go{display:flex;align-items:center;gap:12px;margin-top:11px}
.cat-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.cat-out{margin-top:12px}
.cat-score{margin:0 0 11px;font-family:var(--ui);font-size:13.5px;line-height:1.6;color:var(--ink)}

/* WHAT EACH ANSWER TURNS ON. This was a four column yes and no matrix and it
   asserted thirty six judgements the evidence did not carry. It is now three
   columns: the business, the condition its own judgement turns on, and what
   that rests on. Nothing is printed about a cell nobody established. */
.cat-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,1.6fr);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.cat-gr{display:contents}
.cat-gr>span{padding:7px 9px;border-bottom:1px solid var(--line);font-family:var(--ui);
  font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.cat-gh>span{background:var(--bg-3);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-4)}
.cat-gr.no>span:first-child{color:var(--ink-3)}
.cat-gr>span.v{color:var(--money)}
.cat-gr>span.x{color:var(--open);font-weight:600;
  background:color-mix(in srgb,var(--open) 10%,transparent)}
.cat-syn{margin:10px 0 0;font-family:var(--ui);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.cat-syn b,.cat-syn strong{color:var(--ink-2)}
.cat-v{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.cat-note{margin:12px 0 0;font-family:var(--ui);font-size:11px;line-height:1.55;color:var(--ink-4)}

@media (max-width:720px){
  .cat-r{grid-template-columns:minmax(0,1fr) auto}
  .cat-a{grid-column:2}
  .cat-grid{grid-template-columns:minmax(0,1fr);font-size:10.5px}
  .cat-gh{display:none}
  .cat-gr>span:first-child{font-weight:600;color:var(--ink);border-bottom:none;padding-bottom:2px}
  .cat-gr>span:last-child{border-bottom:1px solid var(--line)}
}

/* ------------------------------------------------ the published rules ---- */
.rl-rows{display:flex;flex-direction:column;gap:7px}
.rl-r{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.4fr) minmax(0,1.6fr);
  gap:10px;padding:10px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px}
/* The two rows with no rule are the argument, so they are drawn as an absence
   rather than as a row that happens to say no. */
.rl-r.none{background:var(--bg);border-style:dashed}
.rl-t{margin:0;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink-2)}
.rl-rule{margin:0;font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink)}
.rl-r.none .rl-rule{color:var(--ink-4);font-style:italic}
.rl-why{margin:0;font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.rl-so{margin:11px 0 0;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}

@media (max-width:720px){
  .rl-r{grid-template-columns:minmax(0,1fr);gap:5px}
}

/* ==========================================================================
   The remaining six modules.

     sVerbs        vb-   the four verbs, and the fifth button that is a trap
     sDay          dy-   one shift, and the hours nobody is on
     sFirst        fw-   who would have known first
     sFanRights    rt-   how far can you take this
     sBuild        bd-   build it, then lose it
     sDefs         df-   one word, six meanings, six populations
     sSides        sd-   which side is which

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

/* Reduced motion is honoured by removing the two things that move: the shift
   bar and the coverage bar. Nothing else animates. */
.s4-still *{transition:none !important;animation:none !important}

/* ---------------------------------------------- shared answer marking ---- */
.vb-mark,.dy-mark,.fw-mark,.rt-mark{margin:11px 0 6px;font-family:var(--ui);font-size:12px;
  font-weight:600;letter-spacing:.03em}
.vb-mark.ok,.fw-mark.ok,.rt-mark.ok,.dy-mark.g-best{color:var(--money)}
.vb-mark.no,.fw-mark.no,.rt-mark.no,.dy-mark.g-bad{color:var(--open)}
.dy-mark.g-ok{color:var(--warn)}
.dy-mark.g-poor{color:var(--accent-2)}
.vb-why,.dy-why,.fw-why,.rt-why{margin:0;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.vb-count,.dy-count,.fw-count,.rt-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.vb-more,.dy-more,.fw-more,.rt-more{display:flex;align-items:center;gap:12px;margin-top:12px}
.vb-score,.fw-score,.rt-score,.sd-score{margin:0 0 9px;font-family:var(--ui);font-size:13.5px;
  line-height:1.6;color:var(--ink)}
.vb-v,.fw-v,.rt-so,.sd-v{margin:0;font-family:var(--ui);font-size:13px;line-height:1.65;
  color:var(--ink)}
.vb-out,.fw-out,.rt-out,.sd-out{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}

/* ------------------------------------------------------- the four verbs -- */
.vb-case{margin:0 0 11px;font-family:var(--text);font-size:14.5px;line-height:1.65;color:var(--ink)}
.vb-ev{display:inline-block;margin-left:5px;font-family:var(--ui);font-style:normal;font-size:10px;
  letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line-2)}
.vb-ev.ev-doc{color:var(--ev-doc)}
.vb-ev.ev-evi{color:var(--ev-evi)}
.vb-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}
.vb-o{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  padding:9px 11px;height:auto;white-space:normal}
.vb-o b{font-family:var(--ui);font-size:12.5px;color:var(--ink)}
.vb-o span{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink-4)}
/* The fifth button is drawn as a real option, because an option that looks
   optional is not a trap and teaches nothing. */
.vb-o.trap{border-style:dashed}
.vb-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent)}
.vb-o.no{border-color:var(--open);background:color-mix(in srgb,var(--open) 9%,transparent)}
.vb-trap{margin:0 0 7px;padding:8px 10px;border-radius:9px;font-family:var(--ui);font-size:12px;
  line-height:1.6;color:var(--ink-2);background:var(--open-soft);
  border:1px solid color-mix(in srgb,var(--open) 26%,transparent)}

/* ----------------------------------------------------------- one shift --- */
.dy-clock{margin-bottom:12px}
.dy-track{height:4px;border-radius:999px;background:var(--bg-4);overflow:hidden}
.dy-track i{display:block;height:100%;width:0;background:var(--n4);transition:width .35s var(--ease)}
.dy-ticks{display:flex;justify-content:space-between;gap:4px;margin-top:6px}
.dy-tick{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--ink-4);opacity:.5}
.dy-tick.on{opacity:1;color:var(--ink-3)}
.dy-tick.off{color:var(--open)}
.dy-m{display:flex;gap:11px;align-items:baseline;margin-bottom:10px}
.dy-at{font-family:var(--mono);font-size:15px;color:var(--ink-2);flex:0 0 auto}
.dy-at.blocked{color:var(--warn)}
.dy-at.off{color:var(--open)}
.dy-t{margin:0;font-family:var(--text);font-size:14.5px;line-height:1.65;color:var(--ink)}
.dy-opts{display:flex;flex-direction:column;gap:6px}
.dy-o{text-align:left;white-space:normal;height:auto;padding:9px 11px;font-family:var(--ui);
  font-size:12.5px;line-height:1.55}
.dy-o.g-best{border-color:var(--money);background:color-mix(in srgb,var(--money) 8%,transparent)}
.dy-o.g-ok{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,transparent)}
.dy-o.g-poor,.dy-o.g-bad{opacity:.72}
.dy-o.on{outline:1px solid var(--accent)}
.dy-none{margin:0;padding:12px;border:1px dashed var(--line-2);border-radius:10px;
  font-family:var(--ui);font-size:12.5px;color:var(--ink-4);text-align:center}
/* The blocked moment and the empty hour are drawn the same way, because they
   are the same finding twice: the right action belongs to somebody else. */
.dy-note{margin:9px 0 0;padding:9px 11px;border-radius:9px;font-family:var(--ui);font-size:12px;
  line-height:1.6;color:var(--ink-2);background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 24%,transparent)}
.dy-out{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dy-sum{display:flex;align-items:baseline;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line);margin-bottom:10px}
.dy-sum span{font-family:var(--ui);font-size:16px;font-weight:600;color:var(--open)}
.dy-sum b{font-family:var(--ui);font-size:12px;font-weight:400;color:var(--ink-4)}
.dy-close,.dy-obs,.dy-so{margin:0 0 8px;font-family:var(--ui);font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.dy-so{margin-bottom:0;color:var(--ink)}

/* --------------------------------------------- who would have known ------ */
.fw-case{margin:0 0 11px;font-family:var(--text);font-size:14.5px;line-height:1.65;color:var(--ink)}
.fw-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px}
.fw-o{text-align:left;white-space:normal;height:auto;padding:9px 11px;font-family:var(--ui);
  font-size:12.5px}
.fw-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent)}
.fw-o.no{border-color:var(--open);background:color-mix(in srgb,var(--open) 9%,transparent)}

/* ------------------------------------------------------- fan rights ------ */
.rt-case{margin:0 0 11px;font-family:var(--text);font-size:14.5px;line-height:1.65;color:var(--ink)}
.rt-opts{display:flex;flex-direction:column;gap:6px}
.rt-o{text-align:left;white-space:normal;height:auto;padding:9px 11px;font-family:var(--ui);
  font-size:12.5px}
.rt-o.ok{border-color:var(--money);background:color-mix(in srgb,var(--money) 9%,transparent)}
.rt-o.no{border-color:var(--open);background:color-mix(in srgb,var(--open) 9%,transparent)}
/* The clearance list is the teaching. It is drawn as a bill, because that is
   what it is. */
.rt-clear{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--bg-2);
  border:1px solid var(--line)}
.rt-ch{margin:0 0 6px;font-family:var(--ui);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.rt-clear ul{margin:0;padding-left:17px}
.rt-clear li{font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-2);margin:2px 0}

/* --------------------------------------------------- build it, lose it --- */
.bd-gate{padding:11px 13px;border-radius:11px;background:var(--bg-2);border:1px solid var(--line)}
.bd-gq{margin:0 0 8px;font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink)}
.bd-gopts{display:flex;gap:6px}
.bd-g{min-width:44px}
.bd-g.on{border-color:var(--accent);background:var(--accent-soft)}
.bd-g.ok{border-color:var(--money);color:var(--money)}
.bd-gsay{margin:9px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.bd-gsay:empty{display:none}
.bd-work{margin-top:13px}
.bd-controls{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;
  align-items:start}
.bd-pl{margin:0;padding:0;border:0}
.bd-pl legend{padding:0;font-family:var(--ui);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4)}
.bd-pls{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.bd-p{text-align:left;white-space:normal;height:auto;padding:8px 11px;font-family:var(--ui);
  font-size:12.5px}
.bd-p.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.bd-side{display:flex;flex-direction:column;gap:10px}
.bd-pp{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-4)}
.bd-pp b{font-family:var(--ui);font-size:13px;color:var(--ink)}
.bd-au{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-size:12px;
  color:var(--ink-2)}
.bd-out{margin-top:13px}
.bd-rows{display:flex;flex-direction:column;gap:6px}
.bd-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:9px 11px;
  border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.bd-r>span{font-family:var(--ui);font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-4)}
.bd-r>b{font-family:var(--ui);font-size:13.5px;color:var(--ink);text-align:right}
.bd-r>i{grid-column:1 / -1;font-family:var(--ui);font-style:normal;font-size:12px;line-height:1.6;
  color:var(--ink-3)}
.bd-r>i:empty{display:none}
.bd-r.who>b{color:var(--open)}
.bd-bar{margin-top:9px}
.bd-bar i{display:block;height:5px;border-radius:999px;background:var(--money);
  transition:width .3s var(--ease)}
.bd-bar u{display:block;margin-top:5px;font-family:var(--ui);font-size:11px;text-decoration:none;
  color:var(--ink-4)}
.bd-go{margin-top:12px}
.bd-lost{margin-top:12px;padding:11px 13px;border-radius:11px;background:var(--open-soft);
  border:1px solid color-mix(in srgb,var(--open) 26%,transparent)}
.bd-lt{margin:0 0 5px;font-family:var(--ui);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--open)}
.bd-lw{margin:0 0 9px;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.bd-close{margin:0;padding-top:9px;border-top:1px solid var(--line-2);font-family:var(--ui);
  font-size:12.5px;line-height:1.65;color:var(--ink)}

/* ------------------------------------------------- one word, six meanings */
.df-guess{display:flex;flex-direction:column;gap:5px;font-family:var(--ui);font-size:11.5px;
  color:var(--ink-4)}
.df-guess b{font-family:var(--ui);font-size:15px;color:var(--ink)}
.df-go{margin-top:11px}
.df-scale{margin-top:16px}
/* The scale is the argument. Six pins on one axis, one of which is the
   reader's own answer, and the spread between the outer two is ten times. */
.df-axis{position:relative;height:52px;border-radius:10px;background:var(--bg-2);
  border:1px solid var(--line)}
.df-axis i{position:absolute;top:0;bottom:0;width:2px;background:var(--ink-4);transform:translateX(-1px)}
.df-axis i u{position:absolute;top:4px;left:4px;white-space:nowrap;font-family:var(--mono);
  font-size:10px;text-decoration:none;color:var(--ink-3)}
.df-axis i.df-pin{background:var(--n4)}
.df-axis i.df-pin u{top:auto;bottom:4px;color:var(--n4)}
.df-axis i.df-you{background:var(--accent);width:3px}
.df-axis i.df-you u{color:var(--accent)}
.df-marks{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--mono);
  font-size:10px;color:var(--ink-4)}
.df-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.df-d{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.3fr);gap:10px;
  padding:9px 11px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.df-d.none{border-style:dashed;background:var(--bg)}
.df-p{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--n4)}
.df-d.none .df-p{color:var(--ev-unk);font-size:11.5px}
.df-t{font-family:var(--ui);font-size:12px;line-height:1.55;color:var(--ink)}
.df-w{font-family:var(--ui);font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.df-w.ev-unk{color:var(--ink-4)}
.df-out{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.df-say,.df-so{margin:0 0 8px;font-family:var(--ui);font-size:13px;line-height:1.65;color:var(--ink)}
.df-so{margin-bottom:0;color:var(--ink-2)}

/* ------------------------------------------------------ which side is --- */
.sd-list{display:flex;flex-direction:column;gap:6px}
.sd-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:8px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.sd-r.right{border-color:var(--money);background:color-mix(in srgb,var(--money) 8%,transparent)}
.sd-r.wrong{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.sd-t{font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.sd-b{display:flex;gap:5px}
.sd-b .btn{padding:4px 10px;font-size:11px;height:auto;white-space:normal;text-align:left}
.sd-b .btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.sd-b .btn.ok{border-color:var(--money);color:var(--money)}
.sd-w{grid-column:1 / -1;margin-top:3px;padding-top:7px;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:12px;line-height:1.6;color:var(--ink-3)}
.sd-go{display:flex;align-items:center;gap:12px;margin-top:11px}
.sd-count{font-family:var(--ui);font-size:11.5px;color:var(--ink-4)}
.sd-y{margin:9px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.65;color:var(--ink-2)}

@media (max-width:720px){
  .vb-opts,.fw-opts{grid-template-columns:minmax(0,1fr)}
  .dy-m{flex-direction:column;gap:3px}
  .dy-ticks{flex-wrap:wrap}
  .bd-controls{grid-template-columns:minmax(0,1fr)}
  .df-d{grid-template-columns:minmax(0,1fr);gap:4px}
  .sd-r{grid-template-columns:minmax(0,1fr)}
  .sd-b{flex-wrap:wrap}
}