/* Reader notes + the "worth your time" vote (built by sq-social.js).
   The three open posts each carry their own palette, so this borrows whatever
   the page defines — accent, muted, page — and inherits its fonts. The bare
   <section data-sq-social> stays invisible until the script grows it. */

/* max-width matches the widest article column; where the widget already sits
   inside a narrower column the cap does nothing and it just fills the column */
.sq-social{margin:48px auto 0;max-width:720px;border:2px solid var(--accent,#888);padding:16px 18px 20px;box-sizing:border-box}
@media(max-width:760px){.sq-social{margin-left:20px;margin-right:20px}}
.sqs-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.sqs-cap{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted,#777)}
.sqs-vote{font:inherit;font-size:.85rem;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
  cursor:pointer;background:transparent;border:1px solid var(--accent,#888);color:var(--accent,inherit);
  transition:background .12s,color .12s}
.sqs-vote:hover{background:var(--accent,#888);color:var(--page,#fff)}
.sqs-vote.is-mine{background:var(--accent,#888);color:var(--page,#fff)}
.sqs-vote:focus-visible{outline:2px solid var(--accent,#888);outline-offset:2px}
.sqs-vote:disabled{opacity:.6;cursor:default}
.sqs-arrow{font-size:.8em}
.sqs-count{font-weight:700;font-variant-numeric:tabular-nums}
.sqs-votelab{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.sqs-list{display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
.sqs-empty{margin:0;font-style:italic;font-size:.9rem;color:var(--muted,#777)}
.sqs-note{border-left:3px solid var(--accent,#888);padding:2px 0 2px 12px}
.sqs-meta{margin:0;font-size:.72rem;color:var(--muted,#777)}
.sqs-meta b{color:var(--accent,inherit)}
.sqs-text{margin:3px 0 0;font-size:.92rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.sqs-form{display:flex;flex-direction:column;gap:9px}
.sqs-handle,.sqs-body{font:inherit;font-size:1rem;padding:8px 10px;width:100%;box-sizing:border-box;
  border:1px solid var(--muted,#999);background:transparent;color:inherit;border-radius:0}
.sqs-handle{max-width:240px}
.sqs-body{min-height:70px;resize:vertical}
.sqs-handle:focus-visible,.sqs-body:focus-visible{outline:2px solid var(--accent,#888);outline-offset:1px}
.sqs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sqs-send{font:inherit;font-size:.8rem;font-weight:700;padding:8px 14px;cursor:pointer;
  border:1px solid var(--accent,#888);background:transparent;color:var(--accent,inherit)}
.sqs-send:hover{background:var(--accent,#888);color:var(--page,#fff)}
.sqs-send:focus-visible{outline:2px solid var(--accent,#888);outline-offset:2px}
.sqs-send:disabled{opacity:.6;cursor:default}
.sqs-msg{font-size:.75rem;color:var(--muted,#777)}

/* --- The scroll gate (sq-social.js reveals it past ~55% scroll depth) ---
   Fixed card, bottom-right on wide screens, full-width bar on small ones.
   Borrows the page palette the same way the reader-notes widget does. */
.scroll-gate{position:fixed;right:18px;bottom:18px;z-index:60;max-width:360px;box-sizing:border-box;
  background:var(--surface,var(--page,#fff));color:inherit;border:2px solid var(--accent,#888);
  box-shadow:4px 4px 0 rgba(0,0,0,.18);padding:14px 40px 14px 16px;
  opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s}
.scroll-gate.sg-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.scroll-gate{transition:none;transform:none}}
@media(max-width:640px){.scroll-gate{right:0;left:0;bottom:0;max-width:none;border-width:2px 0 0}}
.sg-h{margin:0 0 4px;font-weight:700;font-size:1rem;line-height:1.3}
.sg-p{margin:0 0 10px;font-size:.85rem;line-height:1.45;color:var(--muted,#777)}
.scroll-gate .beta-form{display:flex;gap:8px;flex-wrap:wrap}
.scroll-gate .hp{position:absolute;left:-9999px}
.sg-em{flex:1 1 160px;font:inherit;font-size:1rem;padding:8px 10px;min-width:0;
  border:1px solid var(--muted,#999);background:transparent;color:inherit;border-radius:0}
.sg-em:focus-visible{outline:2px solid var(--accent,#888);outline-offset:1px}
.sg-go{font:inherit;font-size:.8rem;font-weight:700;padding:8px 13px;cursor:pointer;
  border:1px solid var(--accent,#888);background:var(--accent,#888);color:var(--page,#fff)}
.sg-go:hover{filter:brightness(1.08)}
.sg-go:focus-visible{outline:2px solid var(--accent,#888);outline-offset:2px}
.sg-x{position:absolute;top:6px;right:8px;font:inherit;font-size:1.15rem;line-height:1;
  background:none;border:0;cursor:pointer;color:var(--muted,#777);padding:4px}
.sg-x:hover{color:inherit}
.sg-x:focus-visible{outline:2px solid var(--accent,#888)}
.scroll-gate .beta-msg{margin:8px 0 0;font-size:.78rem}
.scroll-gate .beta-msg.bad{color:#b3261e}
.scroll-gate .beta-done{display:none}
.scroll-gate.is-done .beta-form,.scroll-gate.is-done .sg-p,.scroll-gate.is-done .beta-msg{display:none}
.scroll-gate.is-done .beta-done{display:block;font-size:.9rem;line-height:1.4}

/* --- Paywall temperament of the scroll gate --------------------------------
   The aside becomes a full-width curtain: a fade that swallows the rest of
   the article and a centered card that is the only interactive thing left.
   html/body get .pw-lock while it is up, so the page holds still. */
html.pw-lock,body.pw-lock{overflow:hidden}
/* The curtain covers the viewport and the card sits in the middle of it
   (Michael, Aug 28: "can we have that appear in the middle of the screen and
   not the bottom?"). The fade still starts transparent at the top so a few
   lines of the story stay legible above the ask. */
.scroll-gate.paywall{left:0;right:0;top:0;bottom:0;max-width:none;height:100vh;height:100dvh;
  background:transparent;border:0;box-shadow:none;padding:0;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.scroll-gate.paywall .pw-fade{position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent, var(--page,#fff) 34%)}
.scroll-gate.paywall .pw-card{position:relative;pointer-events:auto;
  margin:0 18px;max-width:520px;box-sizing:border-box;
  max-height:92vh;max-height:92dvh;overflow-y:auto;
  background:var(--surface,var(--page,#fff));border:2px solid var(--accent,#888);
  box-shadow:5px 5px 0 rgba(0,0,0,.22);padding:20px 22px 22px}
.scroll-gate.paywall .sg-h{font-size:1.25rem}
.scroll-gate.paywall .sg-em{flex:1 1 200px}
@media(max-width:640px){.scroll-gate.paywall{border:0}
  .scroll-gate.paywall .pw-card{margin:0 10px}}

/* ── sport sprites for the league charts ──────────────────────────────
   Michael asked whether the icons could move like Quizzy, "just up and
   down, like how old games were". They can, and it is Quizzy's exact
   motion: .34s, 3px, steps(1,end).

   The steps(1,end) is the whole trick. It snaps between two positions
   instead of easing, and that snap is what reads as a sprite rather than
   a modern floating icon. Easing here would look like a loading spinner.

   Redeclared rather than shared because Quizzy's keyframe lives in
   door.css, which article pages do not load. Same numbers on purpose:
   everything on the page bobs on one beat.

   The sprites sit in the DOM above the canvas rather than being painted
   into it. Painting them would mean redrawing the whole chart every
   frame to animate four small objects, which costs battery on a phone
   for no reason -- and this way the bob is CSS, so it obeys
   prefers-reduced-motion for free. */
.lg-key{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 0;padding:0;list-style:none}
.lg-key li{display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--muted,#8c8578)}
.lg-key .lg-sprite{width:20px;height:20px;display:block;flex:0 0 auto;
  animation:sqbob .34s steps(1,end) infinite}
.lg-key .nfl{color:var(--nfl)} .lg-key .mlb{color:var(--mlb)}
.lg-key .nba{color:var(--nba)} .lg-key .nhl{color:var(--nhl)}
.lg-key .lg-name{color:var(--muted,#8c8578)}
@keyframes sqbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.lg-key .lg-sprite{animation:none}}

/* The returning-member line under the gate's pitch. Deliberately quieter
   than the pitch above it: it is reassurance for people who already did
   the thing, not a second ask. */
.scroll-gate .sg-back{margin:6px 0 0;font-family:var(--mono);font-size:.62rem;
  line-height:1.6;color:var(--muted,#8c8578)}