/* Compare (E3): chapter 02, "How good was 228 bushels?"  SPEC 4.4.
   Every selector starts with #compare. Only transform and opacity animate (set from compare.js).
   Desktop (>=1100): copy cols 1-5, stage cols 6-12 (one canvas + at most 10 labels).
   Under 1100: one column. Under 760: stage 50svh; the slot under it holds the subline (opening 12%)
   and, at 90-100, the potential and the closing line. */
#compare .cp{position:relative;height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr) auto;column-gap:var(--gap);row-gap:10px;
  padding-top:calc(var(--top-safe) + 8px);padding-bottom:4svh}
/* the copy column's slate sits on the same line in every chapter: var(--top-safe) + 14svh (the grid's
   padding-top is --top-safe + 8px). The slate, H2 (per line) and subline are revealed as the section
   scrolls in (compare.js), so they are in place before the frame sticks. */
#compare .cp-copy{grid-column:1 / span 5;grid-row:1;align-self:start;margin-top:calc(14svh - 8px);position:relative;z-index:var(--z-overlay);
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-right:12px}
#compare .cp-copy .h2{max-width:10em}
#compare .cp-swap{display:grid;width:100%}
#compare .cp-swap>*{grid-area:1 / 1;align-self:start}
#compare .cp-sub{max-width:40ch;margin:0;opacity:0;text-wrap:balance}

/* the payoff: the app's word ("Potential vs the top 6%"), then one figure at a time, then all three at
   display size, one per line: figures in ink, words in ink-2 */
#compare .cp-pay{display:grid;gap:14px;align-content:start;width:100%}
#compare .cp-kick{color:var(--lime);opacity:0;visibility:hidden;display:flex;align-items:center}
#compare .cp-kick::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lime);margin-right:10px;flex:none}
#compare .cp-figs{display:grid;width:100%}
#compare .cp-figs>*{grid-area:1 / 1;align-self:start}
#compare .cp-fig{display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden}
#compare .cp-big{font-family:var(--f-mono);font-weight:500;font-size:clamp(1.75rem,3.4vw,3.25rem);line-height:1.05;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
#compare .cp-ap{font-family:var(--f-display);font-weight:500;letter-spacing:0;margin-right:.14em;color:var(--ink-2)}
#compare .cp-words{font:500 1.375rem/1.3 var(--f-display);letter-spacing:-.01em;color:var(--ink-2)}
#compare .cp-comb{font-family:var(--f-display);font-weight:500;font-size:clamp(1.75rem,3.4vw,3.25rem);line-height:1.12;letter-spacing:-.03em;
  color:var(--ink-2);margin:0;opacity:0;visibility:hidden}
#compare .cp-ln{display:block;white-space:nowrap}
#compare .cp-comb .num{font-family:var(--f-mono);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
#compare .cp-comb .cp-lb{display:block;margin-top:6px;color:var(--ink-2);letter-spacing:0}
/* phones whose slot can't hold the yield note under the end block: the field line says "Estimates." itself */
#compare .cp-estw{display:none}
#compare .cp-slot.is-est .cp-estw{display:inline}
#compare .cp-close{max-width:40ch;margin:0;color:var(--ink-2);opacity:0;visibility:hidden;text-wrap:balance}
#compare .cp-stage{grid-column:6 / span 7;grid-row:1;align-self:center;position:relative;height:100%;max-height:var(--stage-h);
  z-index:var(--z-stage)}
#compare .cp-slot{display:none}
/* the footnote explains the dots, so it sits under the map (and leaves the copy column its full height) */
#compare .cp-foot{grid-column:6 / span 7;grid-row:2;align-self:end;max-width:98ch;margin:0}
@media (min-width:1100px) and (max-height:780px){
  #compare .cp-copy{gap:16px}
  #compare .cp-pay{gap:10px}
}

/* in-stage labels */
#compare .cp-stage>*:not(.fm-canvas){position:absolute;left:0;top:0}
#compare .fm-canvas{z-index:0}
#compare .cp-row{z-index:4;color:var(--ink);white-space:nowrap;display:flex;align-items:center;opacity:0;visibility:hidden}
#compare .cp-row::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lime);margin-right:10px;flex:none}
#compare .cp-tok{opacity:0;white-space:pre}
/* the counter: a fixed box (it never changes width as it counts or relabels); the pool label breaks
   before its years */
#compare .cp-count{z-index:4;left:auto !important;right:0;width:min(300px,100%);text-align:right;display:grid;justify-items:end;gap:6px}
#compare .cp-cn{color:var(--ink);display:block;text-align:right}
#compare .cp-cl{color:var(--ink-2);min-height:calc(2 * 1.35em);justify-self:stretch}
#compare .cp-gate{z-index:5;opacity:0;visibility:hidden;--scan-fall:40px}
#compare .cp-gl{position:absolute;left:0;bottom:10px;font-size:1rem;color:var(--lime);white-space:nowrap;
  background:linear-gradient(90deg,rgba(10,13,11,.92),rgba(10,13,11,.92) 85%,rgba(10,13,11,0));padding:3px 18px 3px 0}
#compare .cp-axis{z-index:3;width:100%;height:22px;opacity:0;visibility:hidden}
#compare .cp-tick{position:absolute;top:0;color:var(--ink-3);white-space:nowrap;font-size:.875rem;letter-spacing:.06em}
#compare .cp-top{z-index:4;color:var(--lime);white-space:nowrap;opacity:0;visibility:hidden}
#compare .cp-you{z-index:4;color:var(--amber);white-space:nowrap;text-align:center;opacity:0;visibility:hidden}
#compare .cp-gap{z-index:4;color:var(--lime);white-space:nowrap;text-align:center;opacity:0;visibility:hidden}
#compare .cp-rank{z-index:4;top:88px !important;display:grid;gap:8px;opacity:0;visibility:hidden}
#compare .cp-rl{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
#compare .cp-rn{color:var(--ink)}
#compare .cp-rw{font:500 1.5rem/1 var(--f-display);letter-spacing:-.02em;color:var(--ink-2)}
#compare .cp-rb{color:var(--ink-2);max-width:30ch}

/* ---------- one column under 1100 ---------- */
@media (max-width:1099px){
  #compare .cp{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;row-gap:14px;
    padding-top:calc(var(--top-safe) + 16px);padding-bottom:3svh}
  #compare .cp-copy{grid-column:1;grid-row:1;gap:12px;padding-right:0;margin-top:0}
  #compare .cp-copy .h2{max-width:none}
  #compare .cp-sub,#compare .cp-close{max-width:60ch}
  #compare .cp-big,#compare .cp-comb{font-size:clamp(1.75rem,4.4vw,2.5rem)}
  #compare .cp-stage{grid-column:1;grid-row:2;max-height:640px}
  #compare .cp-foot{grid-column:1;grid-row:3}
}

/* ---------- phones ---------- */
@media (max-width:759px){
  #compare .cp{grid-template-rows:auto auto minmax(0,1fr);row-gap:12px;padding-top:calc(var(--nav-h) + var(--bar-h) + 14px);padding-bottom:12px}
  #compare .cp-copy{gap:6px}
  #compare .cp-copy .h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  #compare .cp-stage{grid-row:2;height:min(46svh,calc(100svh - 430px));min-height:300px;max-height:none;align-self:start}
  #compare .cp-slot{grid-column:1;grid-row:3;display:grid;grid-template-rows:minmax(0,1fr);min-height:0}
  #compare .cp-slot>*{grid-area:1 / 1}
  #compare .cp-slot>.cp-sub,#compare .cp-slot>.cp-end,#compare .cp-slot>.cp-gap{align-self:start}
  #compare .cp-slot .cp-gap{white-space:normal;text-align:left}
  #compare .cp-slot .cp-sub{font-size:1.0625rem;line-height:1.45;max-width:none}
  #compare .cp-end{display:grid;gap:10px;align-content:start}
  #compare .cp-pay{gap:6px}
  #compare .cp-comb{font-size:1.25rem;line-height:1.3;letter-spacing:-.015em}
  #compare .cp-comb .num{letter-spacing:-.02em}
  #compare .cp-comb .cp-lb{font-size:1rem;line-height:1.4;margin-top:2px}
  #compare .cp-close{font-size:1rem;line-height:1.45;max-width:none}
  /* the short footnote stays for the whole phone scene, at the bottom of the slot */
  #compare .cp-note{align-self:end;margin:0}
  /* a slot a few px short of holding the end block and the note: the end block's spacing tightens a little */
  #compare .cp-slot.is-tight .cp-end{gap:6px}
  #compare .cp-slot.is-tight .cp-pay{gap:4px}
  #compare .cp-slot.is-tight .cp-comb .cp-lb{margin-top:0}
  #compare .cp-count{left:0 !important;right:auto;top:26px !important;width:auto;text-align:left;justify-items:start;gap:2px}
  #compare .cp-cn{text-align:left}
  #compare .cp-count .readout-s{font-size:1.75rem}
  #compare .cp-rank{top:26px !important;gap:4px}
  #compare .cp-rl .readout-s{font-size:1.75rem}
  #compare .cp-rw{font-size:1.125rem}
  #compare .cp-rb{font-size:1rem;max-width:none}
  #compare .cp-you{text-align:left}
  #compare .cp-top{text-align:right}
  /* a fixed two-line box, text at its foot: a longer gate label never moves the box */
  #compare .cp-gl{font-size:.875rem;white-space:normal;max-width:100%;text-wrap:balance;
    min-height:calc(2 * 1.35em + 6px);display:flex;align-items:flex-end}
  #compare .cp-row{font-size:.875rem;letter-spacing:.06em}
  #compare .cp-row::before{margin-right:8px}
}

/* ---------- reduced motion / ?static=1: the final histogram, rank, the potential, closing line ---------- */
#compare.is-static .cp{height:auto;padding-bottom:64px}
#compare.is-static .cp-copy .slate,#compare.is-static .cp-copy .h2,#compare.is-static .cp-kick,#compare.is-static .cp-comb,
#compare.is-static .cp-close{opacity:1;visibility:visible}
#compare.is-static .cp-stage{height:var(--stage-h);max-height:none}
#compare.is-static .cp-foot{margin-top:8px}
@media (max-width:759px){
  #compare.is-static .cp-stage{height:360px}
}