@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* --- the shell: navigation down the left, on every page ------------------
   A sticky top bar carrying its own search field above a page that also
   searches is two navigations competing. Down the left it is out of the way
   and the content column gets the width. Under 860px it becomes a strip. */
*{box-sizing:border-box}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{border-right:1px solid var(--rule);background:var(--sunk);
 padding:20px 16px;display:flex;flex-direction:column;gap:18px;
 position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:8px;font:800 18px Archivo,
 sans-serif;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
/* ONE WORD. "Slate Stats" with a space read as two words in a row; the
   wordmark is SlateStats, and the color change is what separates them. */
.side .brand .wm{white-space:nowrap}
/* THE SAME WORDMARK THE CARDS CARRY. Posts went out with "Stats" in
   blue and the site rail had it in green, so the two halves of one
   brand disagreed in the one place a reader compares them: arriving
   here from a post. `--navy` resolves to the card's blue on dark and
   to a deep navy on light, so it is one token rather than a copy. */
.side .brand .wm>span{color:var(--navy)}
.side .mk{width:22px;height:22px;color:var(--navy)}
.side nav{display:flex;flex-direction:column;gap:1px}
.side nav a{padding:7px 10px;border-radius:7px;color:var(--ink-2);
 text-decoration:none;font-size:14px}
.side nav a:hover{background:var(--ground);color:var(--ink)}
.side nav a[aria-current]{background:var(--ground);color:var(--ink);
 font-weight:600}
.side .lab{font:600 11px Archivo,sans-serif;letter-spacing:.09em;
 text-transform:uppercase;color:var(--ink-3);padding:0 10px;margin-bottom:5px}
.acct{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
 font-size:12.5px;color:var(--ink-3)}
/* THE GLOBAL `svg{width:100%}` WINS OVER width="15" ON THE ELEMENT, because
   a stylesheet beats a presentation attribute. Without this the account icon
   fills the sidebar -- which is exactly how it shipped, and it was invisible
   for as long as the deploy was publishing to a path nobody served. */
/* THE GLOBAL `svg{width:100%}` WINS OVER A width ATTRIBUTE, because a
   stylesheet beats a presentation attribute. Sized here, and only here. */
.whorow{display:flex;align-items:center;gap:7px}
.acct .who{display:inline-flex;width:20px;height:20px;padding:0;
  border-radius:50%;color:var(--ink-3);flex:none}
.acct .who svg{width:20px;height:20px;flex:none;display:block}
.acct .who:hover{color:var(--ink);text-decoration:none}
.foot-legal{margin:14px auto 0;max-width:72ch;padding-top:12px;
  border-top:1px solid var(--rule-2);color:var(--ink-3);font-size:12px;
  line-height:1.6;text-align:center}
.foot-legal a{color:var(--ink-2)}
/* "Ask again" on a saved row. A link, not a button: it navigates, and
   dressing a navigation as a button is a small lie about what happens. */
.upsell{margin:14px 0 6px}
.upsell .btn{display:inline-block;padding:9px 15px;border-radius:9px;
  background:var(--navy);color:var(--surface);text-decoration:none;
  font-weight:600;font-size:14px}
.upsell .btn:hover{filter:brightness(1.12)}
.again{white-space:nowrap;font-size:12.5px;color:var(--navy);
  text-decoration:none;border-bottom:1px solid transparent}
.again:hover{border-bottom-color:currentColor}
/* A column header that says when we last looked. Normal case and lighter
   than the header it sits under: it is a footnote, not a second heading. */
th .when{display:block;margin-top:3px;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:10.5px;color:var(--ink-3)}
.chat-legal{margin:14px auto 0;max-width:70ch;color:var(--ink-3);
  font-size:12px;line-height:1.55;text-align:center}
.chat-legal a{color:var(--ink-3);text-decoration:underline}
.chat-legal a:hover{color:var(--ink-2)}
/* THE TIER PILL IS GONE. "Free" is a fact about our billing, not about
   the reader's account, and it was the loudest thing on a quiet rail --
   green, which everywhere else on this site means a measured gain. Plan
   belongs on the account page beside what it would change. */
.acct .whorow{display:flex;align-items:center;position:relative}
.acct .acctmenu{position:absolute;left:0;bottom:calc(100% + 8px);
 min-width:158px;background:var(--surface);border:1px solid var(--rule);
 border-radius:10px;padding:5px;box-shadow:0 10px 26px rgba(0,0,0,.24);
 z-index:50;display:flex;flex-direction:column}
.acct .acctmenu[hidden]{display:none}
.acct .acctmenu a,.acct .acctmenu button{display:block;width:100%;
 text-align:left;background:0;border:0;padding:7px 9px;border-radius:7px;
 color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;
 text-decoration:none}
.acct .acctmenu a:hover,.acct .acctmenu button:hover,
.acct .acctmenu a:focus-visible,.acct .acctmenu button:focus-visible{
 background:var(--ground);color:var(--ink)}
.acct button.who{background:0;border:0;cursor:pointer}
.acct a.signin{display:block;padding:8px 11px;border-radius:8px;
 background:var(--navy);color:var(--on-navy);text-decoration:none;font-weight:600;
 text-align:center;font-size:13px}
.acct a.out{color:var(--ink-3);text-decoration:none;font-size:11.5px;
 display:inline-block;margin-top:5px}
/* `.out` IS A BUTTON NOW, on both surfaces, so it has to be un-styled as
   one -- a button carries a border, a background and the browser's own
   font, none of which a link does. */
.out{background:0;border:0;padding:0;font:inherit;cursor:pointer}
.acct a.out:hover{color:var(--ink-2);text-decoration:underline}
.side .foot{margin-top:14px;font-size:12px;color:var(--ink-3)}
.side .foot a{color:var(--ink-3);text-decoration:none;display:block;
 padding:3px 10px}
.side .foot a:hover{color:var(--ink-2)}
.side .srch{position:relative}
.side .srch input{width:100%;font:inherit;font-size:13.5px;padding:7px 10px;
 border:1px solid var(--rule);border-radius:8px;background:var(--surface);
 color:var(--ink)}
.side .srch .res{position:absolute;left:0;right:0;top:100%;z-index:40;
 margin-top:4px;background:var(--surface);border:1px solid var(--rule);
 border-radius:9px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.main{display:flex;flex-direction:column;min-height:100vh;min-width:0}
/* --- the front page's collapsible rail ----------------------------------
   THE RAIL ITSELF COLLAPSES. The first cut kept a narrow stub showing the
   wordmark and floated the nav over the page as a popover, which is a
   different mechanism and not the one asked for: a panel hovering above
   the content covers what you were reading and leaves a permanent stub
   taking a column for nothing.

   Here the rail has NO column when closed and a full one when open, so
   the content genuinely gets the width back. The toggle is the only thing
   that survives the collapse, and it does not move between the two
   states -- it sits at the same coordinates either way, so the control
   you just pressed is still under the cursor.

   Deliberately NOT remembered between visits. The privacy policy tells a
   reader this site stores nothing in their browser, and a preference in
   localStorage would make that less true for the sake of a toggle. If it
   should persist, that is one sentence in the policy first. */
.drawer{display:contents}
.app.min{grid-template-columns:0 1fr}
.app.min .side{width:0;padding:0;border-right:0;gap:0;overflow:hidden}
/* FIXED, so the collapsed rail cannot clip it. `.side` is sticky, which
   does not make a containing block for a fixed child, so this escapes the
   overflow above rather than disappearing with everything else. */
.app.min .menu{display:block;position:fixed;left:13px;top:13px;z-index:60;
 width:34px;height:34px;padding:0;display:grid;place-items:center;
 border-radius:9px}
.app.min.open,.app.min.peek{grid-template-columns:232px 1fr}
.app.min.open .side,.app.min.peek .side{width:auto;padding:16px 16px 20px;
 gap:18px;overflow-y:auto;border-right:1px solid var(--rule)}
/* THE OPEN RAIL SITS OVER THE PAGE RATHER THAN REPLACING IT. Solid, it
   reads as a second document beside the conversation; letting the field
   through says the same panel is temporary. Blurred, because a
   semi-transparent panel over moving text is a legibility problem rather
   than a look -- and only where the blur is supported, so a browser
   without it keeps the solid background instead of translucent text over
   whatever is behind. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
 .app.min.open .side,.app.min.peek .side{
  background:color-mix(in srgb, var(--sunk) 74%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1)}
}
/* The wordmark sits BESIDE the toggle, which is where it is in the
   collapsed state too -- the toggle is the fixed point and everything
   else appears around it. */
.app.min.open .brand,.app.min.peek .brand{margin-left:39px;min-height:34px}
/* ONE MARK, NOT TWO. With the bars folded into the toggle, the wordmark's
   own chart sat eight pixels away drawing the same thing -- which is the
   redundancy that prompted folding them together in the first place. The
   toggle carries the mark here; the wordmark keeps its own everywhere the
   toggle is hidden. */
.app.min.open .brand .mk,.app.min.peek .brand .mk{display:none}
.app.min.open .brand .wm,.app.min.peek .brand .wm{margin-left:2px}
/* DESKTOP ONLY. On the horizontal strip this forced the account block to
   a full row, so the header stacked vertically -- wordmark, then account,
   then the toggle on a third line. It exists to stop a signed-in address
   stretching a 232px COLUMN; a row has no such problem. */
.app.min .acct{width:100%}
@media (max-width:860px){
 /* Below 860 every page already uses the horizontal strip, and the
    collapsible rail must not fight it: the strip IS the collapsed state
    on a phone, with the same button opening the same list. Every desktop
    override is undone here rather than left to specificity. */
 .app.min,.app.min.open,.app.min.peek{grid-template-columns:1fr}
 .app.min .side,.app.min.open .side,.app.min.peek .side{
  width:auto;align-items:center;
  padding:10px 14px;overflow:visible;border-right:0;gap:10px}
 .app.min .menu,.app.min.open .menu,.app.min.peek .menu{
  position:static;width:auto;height:auto;
  padding:6px}
 .app.min .acct{width:auto}
 /* AND AN EMPTY BLOCK TAKES NO PART. `.side .acct` sets display:flex,
    which overrides the `hidden` attribute the shell ships with, so the
    account block was a zero-height flex item on every signed-out page.
    Harmless until something gave it a width. */
 .side .acct[hidden]{display:none}
 /* THE ACCOUNT MENU OPENS DOWNWARD HERE, AND TO THE LEFT.
    `bottom:calc(100% + 8px)` puts it ABOVE the row, which is right on the
    desktop rail where the account block sits at the very bottom and wrong
    in a top strip, where "above" is off the top of the screen. `left:0`
    is the same mistake on the other axis: in the strip the account sits
    at the right edge, so a 158px panel anchored left runs off the side. */
 .acct .acctmenu{top:calc(100% + 8px);bottom:auto;left:auto;right:0}
 .app.min.open .brand,.app.min.peek .brand{margin-left:0}
 /* THE MARK COMES BACK ON THE STRIP. Hiding it is only right where the
    toggle sits immediately left of the wordmark and the two read as one
    lockup. In the horizontal bar the toggle is on the far side of the
    row, so removing the mark just leaves the brand bare. */
 .app.min.open .brand .mk,.app.min.peek .brand .mk{display:block}
 .app.min.open .brand .wm,.app.min.peek .brand .wm{margin-left:0}
 .app.min .drawer{display:contents;position:static}
}

/* The menu button is a MOBILE control; the desktop rail already shows every
   section link, so it has no place there. */
.menu{display:none;background:0;border:0;color:var(--ink-2);cursor:pointer;
  padding:8px;border-radius:9px;margin-left:auto}
/* THE BUTTON HOLDS THE STATE IT PUT THE PAGE IN.
   Closed it is full size and the brightest thing in the corner; open it
   sits pressed -- a little smaller, a little greyer -- so the control
   says which of the two states you are in without a second glyph, and the
   press is the same movement whether you are opening or closing.
   `aria-expanded` is what drives it, so the look cannot drift from what a
   screen reader is told. */
.menu{transition:transform .12s ease,color .12s ease,background .12s ease}
/* HOVER SAYS "THIS IS A BUTTON". Everything else in that corner is a
   wordmark, so without a state change on hover the toggle reads as part
   of the mark. A raised edge is the cheapest way to say pressable
   without adding a border that would be there all the time. */
.menu:hover{color:var(--ink);background:var(--sunk);
  box-shadow:0 1px 7px rgba(0,0,0,.30),0 0 0 1px var(--rule-2)}
.menu:active{transform:scale(.90);color:var(--ink-3);box-shadow:none}
/* OPEN OUTRANKS HOVER. The pressed look has to survive the pointer
   resting on the button -- which is exactly where the pointer is right
   after you clicked it -- so this carries `:hover` too rather than
   letting the plain hover rule undo it a frame later. */
.menu[aria-expanded=true],.menu[aria-expanded=true]:hover{
  color:var(--ink-3);transform:scale(.90);background:var(--sunk);
  box-shadow:none}
.menu[aria-expanded=true]:hover{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.menu{transition:none}}

@media(max-width:860px){
 /* `auto 1fr`, AND IT APPLIES TO EVERY PAGE. A grid stretches its rows to
    fill, so a viewport-height minimum hands the top bar a share of it -- the
    rail measured 238px tall around a 41px row of content. And `.main` keeps
    min-height:100vh while the rail sits ABOVE it on mobile rather than
    beside it, so every page came to 100vh + 62px and carried 62px of dead
    space past the end.
    `dvh` because a phone's address bar makes `vh` report the tallest the
    viewport ever gets rather than what you can see. */
 .app{grid-template-columns:1fr;grid-template-rows:auto 1fr;
  min-height:100dvh}
 .main{min-height:0}
 /* IT WRAPS, IT DOES NOT SCROLL. This was `overflow-x:auto` on a strip
    holding the brand, the search box and nine section links: at 390px the
    search collapsed to 118px and every link sat off-screen behind a
    scrollbar nobody would think to drag. The links are a list now, opened
    by the button, and the bar keeps only brand + search + menu. */
 .side{position:static;height:auto;flex-direction:row;align-items:center;
  gap:10px;padding:10px 14px;overflow:visible;flex-wrap:wrap;border-right:0;
  border-bottom:1px solid var(--rule)}
 /* ONE ROW. Brand, account, menu -- and nothing else competing for it. On a
    real phone the sign-in button pushed search onto a second line and the
    header became two tall rows before any content.
    THE SEARCH BOX IS GONE ON MOBILE, deliberately. The ask box IS the
    search: anything you would type into it is a better question than a
    lookup, and the header has no room for both. It stays on desktop, where
    the rail has a column to itself. */
 .side .srch{display:none}
 /* THE THREE ITEMS ARE ALREADY CENTERED; the problem was WEIGHT. Measured,
    the sign-in block was 49px tall beside a 22px wordmark and a 38px menu
    button, so it dominated the row and made the header 70px. Matching its
    height to the menu button is what makes the row read as one line. */
 /* AND THE RAIL'S SEPARATOR COMES OFF. On desktop the account block sits
    at the bottom of a vertical rail with a rule above it and 14px of space.
    In a horizontal bar that rule is a stray line floating above the sign-in
    button -- which is exactly what it looked like -- and the padding is the
    other 15px that made this block 49px tall against a 34px menu. */
 /* ONE HEADER ORDER FOR EVERY PAGE: wordmark, then the toggle and the
    account together at the right, with the account last. Identity is the
    conventional far-right slot and the toggle is navigation, so it sits
    inboard of it.
    ONE AUTO MARGIN, NOT TWO. Both `.menu` and `.acct` carried
    `margin-left:auto`, so they SPLIT the free space -- the toggle landed
    stranded in the middle at x=226 rather than beside the account. The
    first of the right-hand group takes the space; the rest follow it. */
 .side .menu{order:2;margin-left:auto}
 .side .acct{order:3;margin-left:0;width:auto;display:flex;
  align-items:center;padding:0;border-top:0;margin-top:0}
 .side .acct a.signin{padding:0 13px;height:34px;display:flex;
  align-items:center;font-size:13.5px;white-space:nowrap;border-radius:9px}
 .side .acct .out,.side .acct .tier{display:none}
 .side .menu{padding:6px}
 .menu{display:block}
 .side .navbox{display:none;width:100%;order:9;
  border-top:1px solid var(--rule-2);padding-top:6px;margin-top:2px}
 .app.open .side .navbox,.app.peek .side .navbox{display:block}
 .side nav{flex-direction:column;gap:1px}
 /* 44px because that is a thumb. The old rule was 6px of padding. */
 .side nav a{padding:11px 10px;min-height:44px;display:flex;
  align-items:center;border-radius:9px}
 .side .lab{display:none}
 .app.open .side .lab,.app.peek .side .lab{display:block;padding:4px 10px 2px}
 .side .foot{display:none}
}

:root{--ground:#EEF2F5;--surface:#FFFFFF;--sunk:#F4F7F9;
  /* --ink-3 IS MUTED, NOT DECORATIVE. It carries table headers, captions
     and sample-size notes -- small text, so WCAG AA wants 4.5:1. It was
     #7B8C9B, which is 3.46 on white and 3.07 on --ground: a clear fail
     everywhere it appeared. Dark mode was #6E8598 at 4.27 on --surface.
     Both are now the lightest/darkest value that clears 4.5 on the worst
     background each is used against, with a little headroom.
     Lighthouse only caught the DARK one, because headless Chrome defaults
     to dark -- light mode was worse and invisible to the audit. */
  --ink:#0C1C2C;--ink-2:#46596B;--ink-3:#5E6E7D;
  --rule:#D2DCE3;--rule-2:#E4EBF0;
  --navy:#12405E;--green:#297A22;--green-soft:#E3F2DE;
  /* EVERY SEMANTIC PAIR CHECKED, not just the one the audit landed on.
     These colors are used as text ON their own soft background, so WCAG
     AA wants 4.5:1 for each PAIR. Measured: light green on green-soft was
     3.72, light flat on flat-soft 2.59, dark flat on flat-soft 3.69 --
     three failures, of which Lighthouse reported one, because it only
     sees the elements a given page happens to render. Each is now the
     smallest shift that clears 4.5 on its pill AND on the page
     backgrounds the same token is used against. */
  --warn:#A8443A;--warn-soft:#F7E8E6;--flat:#626D7A;--flat-soft:#EDF0F3;
  /* CHART TOKENS, separate from the document ones because they have the
     opposite job: ink recedes, data carries. Measured rather than picked --
     grid lines were at 1.13:1 against the panel in dark mode, which is
     invisible, and the reference line sat at 5.78:1 against data at 6.70,
     so somebody else's posted number was almost as loud as our measurement.
     The ladder is now deliberate: subject > data > reference > grid. */
  /* TEXT THAT SITS ON THE NAVY FILL. White is right on light mode's deep
     #12405E and wrong on dark mode's #57A9D6, where it measures 2.61:1 --
     below the 4.5:1 that normal text needs. Every button painted navy had
     it: sign in, the send arrow, the format toggles, and the new Ask
     again. One token so the pair cannot drift apart again. */
  --on-navy:#FFFFFF;
  --c-grid:#D3DFE7;--c-ref:#B5705F;
  /* CATEGORIES ARE NOT MEANINGS. Green is a measured gain and --warn is a
     loss everywhere on this site, so spending either on "this series is WR"
     makes one color say two things -- which this project already paid for
     once, when a reader read two adjacent charts as contradicting. These
     four carry no meaning at all and exist only to tell series apart. */
  --c-cat1:#12405E;--c-cat2:#4E7C9B;--c-cat3:#8AA9BD;--c-cat4:#C2D2DD;
  /* ONE SECOND HUE, AND IT MEANS NOTHING ON PURPOSE. Blue-on-blue was
     the honest cost of keeping green semantic: on a two-line chart the
     muted blue read as de-emphasized rather than as a different series.
     A periwinkle is far from the blue, far from the green that means a
     gain and far from the red that means a loss, so it can carry a
     CATEGORY without carrying a verdict. */
  --c-alt:#6155A6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#061320;--surface:#0D2132;--sunk:#0A1B29;
  --ink:#E6EEF4;--ink-2:#9FB3C2;--ink-3:#758B9D;
  --rule:#1C3547;--rule-2:#142636;
  --navy:#57A9D6;--green:#6ECB3F;--green-soft:#12301A;
  --warn:#D97A6C;--warn-soft:#2E1C19;--flat:#808A97;--flat-soft:#16212C;
    --c-grid:#263F54;--c-ref:#96695B;--on-navy:#07141F;
    --c-cat1:#57A9D6;--c-cat2:#8FC4E2;--c-cat3:#B9D9EC;--c-cat4:#6E8FA6;
    --c-alt:#A79BEA}}
.thm{display:flex;gap:6px;justify-content:center;margin-top:14px}
.thm button{font:inherit;font-size:12px;padding:4px 10px;
 border:1px solid var(--rule);border-radius:999px;cursor:pointer;
 background:transparent;color:var(--ink-3)}
.thm button.on{background:var(--sunk);color:var(--ink);
 border-color:var(--rule-2)}
:root[data-theme="dark"]{--ground:#061320;--surface:#0D2132;--sunk:#0A1B29;
  --ink:#E6EEF4;--ink-2:#9FB3C2;--ink-3:#758B9D;
  --rule:#1C3547;--rule-2:#142636;
  --navy:#57A9D6;--green:#6ECB3F;--green-soft:#12301A;
  --warn:#D97A6C;--warn-soft:#2E1C19;--flat:#808A97;--flat-soft:#16212C;
    --c-grid:#263F54;--c-ref:#96695B;--on-navy:#07141F;
    --c-cat1:#57A9D6;--c-cat2:#8FC4E2;--c-cat3:#B9D9EC;--c-cat4:#6E8FA6;
    --c-alt:#A79BEA}
*{box-sizing:border-box}
html,body{margin:0}
/* ---- site header -------------------------------------------------------
   Every page had breadcrumbs up and one cross-link sideways, and nothing
   else. A visitor arriving on a study from search had exactly one way out.
   This is the spine. */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--surface);border-bottom:1px solid var(--rule)}
.hdr-in{max-width:1000px;margin:0 auto;padding:0 16px;display:flex;
  align-items:center;gap:18px;height:54px}
.brand{font-family:Archivo,sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .wm>span{color:var(--navy)}
/* The mark is the site's argument in miniature: a right-skewed distribution
   with the mode picked out. It inherits currentColor so it follows the theme
   instead of carrying a second palette. */
/* GAP ON THE MARK, NOT ON THE FLEX CONTAINER. A flex gap separates every
   child, and the wordmark is a bare text node plus a <span> -- so `gap:8px`
   rendered the brand as "Slate Stats" while the logo says "SlateStats". */
.brand{display:inline-flex;align-items:center;color:var(--navy)}
.brand .mk{width:22px;height:22px;flex:none;margin-right:8px}
/* The league, not a tool. Becomes a switcher when there is a second one. */
.league{display:inline-flex;align-items:center;gap:5px;flex:none;
  margin-left:2px;padding:3px 9px;border:1px solid var(--rule);
  border-radius:99px;background:var(--sunk);color:var(--ink-2);
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-decoration:none}
.league:hover{border-color:var(--navy);color:var(--ink)}
/* Injury designation on a trending row. A snap-share drop caused by a player
   limping off is not a role change, and a prose warning asking the reader to
   go and check is a warning nobody acts on -- so it goes on the row. */
.pill{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:5px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.05em;vertical-align:1px;cursor:help}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.flat{background:var(--flat-soft);color:var(--ink-2)}
.filt{display:inline-flex;align-items:center;gap:7px;margin:0 0 11px;
  font-size:13.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.filt input{width:15px;height:15px;accent-color:var(--navy);cursor:pointer}
/* Data pages are not reading pages. Declared in the SHARED stylesheet
   because three page types use it now -- it was defined inside HOME_CSS,
   which only the landing page loads, so the class silently did nothing
   anywhere else. */
.wrap.wide{max-width:1120px}
.fmt{display:flex;align-items:center;gap:7px;margin:16px 0 4px;flex-wrap:wrap}
.fmt span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:3px}
.fmt button{font:inherit;font-size:13px;padding:6px 13px;cursor:pointer;
  border:1px solid var(--rule);border-radius:99px;background:var(--surface);
  color:var(--ink-2)}
.fmt button:hover{border-color:var(--navy);color:var(--ink)}
.fmt button.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
/* ONE STICKY ROW: positions, horizon, scoring. Switching a position should
   never cost a scroll back to the top, which is what a non-sticky control
   row costs on a 400-row table. */
.bar{position:sticky;top:52px;z-index:40;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin:16px 0 4px;padding:9px 0;
  background:var(--ground);border-bottom:1px solid var(--rule)}
.bar .pos{display:flex;gap:3px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.bar .pos::-webkit-scrollbar{display:none}
.bar .pos button{font:inherit;font-size:13.5px;font-weight:600;padding:6px 13px;
  cursor:pointer;border:1px solid var(--rule);border-radius:8px;
  background:var(--surface);color:var(--ink-2);white-space:nowrap}
.bar .pos button:hover{border-color:var(--navy);color:var(--ink)}
.bar .pos button.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.bar .sel{display:flex;gap:7px;flex:none}
.bar select:disabled{opacity:.42;cursor:not-allowed}
#hint{margin:9px 0 0;font-size:13px;color:var(--ink-3);line-height:1.5}
#hint b{color:var(--ink-2)}
/* The waiver score shows its weighting rather than asking for trust. */
td .sub{display:block;font-size:12px;color:var(--ink-3);line-height:1.45;
  margin-top:2px;max-width:66ch}
td.wt{font-family:"IBM Plex Mono",monospace;font-weight:600;text-align:right;
  white-space:nowrap;color:var(--green)}
td.wt.neg{color:var(--warn)}
/* Two orders of the same pool, so the disagreement is visible at a glance. */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.versus .half{background:var(--surface);border:1px solid var(--rule);
  border-radius:11px;padding:14px 16px}
.versus h3{margin:0 0 2px;font-family:Archivo,sans-serif;font-size:14px;
  font-weight:700}
.versus .cap{margin:0 0 10px;font-size:12px;color:var(--ink-3)}
ol.vs{list-style:none;margin:0;padding:0;counter-reset:none}
ol.vs li{display:flex;align-items:baseline;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--rule-2);font-size:13.5px}
ol.vs li:last-child{border-bottom:0}
ol.vs .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--ink-3);min-width:17px}
ol.vs a{color:var(--ink);text-decoration:none;font-weight:500}
ol.vs a:hover{color:var(--navy)}
ol.vs i{font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;font-weight:600}
ol.vs i.up{color:var(--green)} ol.vs i.dn{color:var(--warn)}
ol.vs b{margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;font-weight:600;white-space:nowrap}
@media (max-width:760px){ .versus{grid-template-columns:1fr} }
.bar select{font:inherit;font-size:13px;padding:6px 9px;border-radius:8px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  cursor:pointer}
@media (max-width:640px){ .bar{top:48px} .bar .sel{width:100%} 
  .bar select{flex:1} }
/* Cheat-sheet tiers. A flat list of 40 names is something you scroll; six
   labeled bands is something you decide from. */
.tier{margin-top:14px;background:var(--surface);border:1px solid var(--rule);
  border-radius:11px;padding:13px 15px}
.tier h3{margin:0 0 8px;font-family:Archivo,sans-serif;font-size:13.5px;
  font-weight:700;display:flex;align-items:baseline;gap:8px}
.tier h3 span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  font-weight:600;color:var(--ink-3);letter-spacing:.05em}
.tier ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:0 18px}
.tier li{display:flex;align-items:baseline;gap:7px;padding:6px 0;
  border-bottom:1px solid var(--rule-2);font-size:13.5px}
.tier li:last-child{border-bottom:0}
.tier li a{color:var(--ink);text-decoration:none;font-weight:500}
.tier li a:hover{color:var(--navy)}
.tier li .t{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ink-3)}
.tier li i{font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px}
.tier li i.up{color:var(--green)} .tier li i.dn{color:var(--warn)}
.tier li b{margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:13px;font-weight:600}
.tier li.more{color:var(--ink-3);font-size:12.5px;grid-column:1/-1}
/* A player who cannot play is not a footnote. */
.flag.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.flag.warn b{color:var(--warn)}
ul.lede{margin:12px 0 0;padding:0;list-style:none}
ul.lede li{padding:9px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px}
ul.lede li:last-child{border-bottom:0}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--ink)}
th.sortable::after{content:"";opacity:.35;margin-left:5px}
th.sortable.up::after{content:"\2191";opacity:1;color:var(--navy)}
th.sortable.dn::after{content:"\2193";opacity:1;color:var(--navy)}
.nav{display:flex;gap:2px;margin-left:2px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
/* On a phone the row still scrolls, and a hidden scrollbar gives no hint.
   A fade at the right edge says there is more without adding chrome. */
.nav-wrap{position:relative;flex:1;min-width:0;display:flex}
.nav-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:26px;
  pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}
@media (min-width:1080px){ .nav-wrap::after{display:none} }
.nav a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:7px 10px;border-radius:7px;white-space:nowrap}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a[aria-current]{color:var(--ink);font-weight:600;background:var(--sunk)}
.srch{position:relative;flex:0 0 auto}
.srch input{font:inherit;font-size:13.5px;width:168px;padding:7px 11px;
  border:1px solid var(--rule);border-radius:8px;background:var(--sunk);
  color:var(--ink)}
.srch input:focus{outline:2px solid var(--navy);outline-offset:-1px;width:230px}
.srch input::placeholder{color:var(--ink-3)}
.res{position:absolute;right:0;top:40px;width:330px;max-height:60vh;
  overflow-y:auto;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:5px}
.res a{display:block;padding:8px 10px;border-radius:7px;text-decoration:none;
  color:var(--ink);font-size:13.5px}
.res a:hover,.res a.on{background:var(--sunk)}
.res a b{font-weight:600}
.res a i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
  margin-top:1px}
.res .none{padding:12px 10px;font-size:13px;color:var(--ink-3)}
@media (max-width:640px){
  .srch input{width:118px} .srch input:focus{width:150px}
  .res{width:min(330px,calc(100vw - 32px))}
  .hdr-in{gap:10px} .brand{font-size:15px}
}
/* ---- site footer ---- */
.foot{margin-top:56px;border-top:1px solid var(--rule);background:var(--surface)}
.foot-in{max-width:1000px;margin:0 auto;padding:26px 16px 34px;display:flex;
  flex-wrap:wrap;gap:26px 44px}
.foot-col .fh{font-family:Archivo,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-2);
  text-decoration:none;padding:3px 0}
.foot-col a:hover{color:var(--ink)}
.foot-note{max-width:1000px;margin:0 auto;padding:0 16px 30px;font-size:12px;
  color:var(--ink-3);line-height:1.7;max-width:62ch}
body{background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
/* `width:100%` IS LOAD-BEARING, and the reason is not obvious.
   .main is a COLUMN flex container, so its cross axis is horizontal -- and
   `margin:0 auto` therefore gives this element AUTO CROSS-AXIS MARGINS. Auto
   margins absorb free space and disable stretch, so the item stopped filling
   its parent and fell back to fit-content: at a 375px viewport .main measured
   375px while .wrap measured 599.125px, and every child inherited the
   stretched width -- h1, crumb, summary. Eight pages scrolled sideways on a
   phone because of it.
   Measured in the page: margins to 0 -> 375px, width:100% -> 375px,
   align-self:stretch -> still 599px, because auto margins beat align-self.
   width:100% is the one that keeps the centering the auto margins are there
   for. */
.wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:26px 60px;
      width:100%}
/* And a wide table now scrolls INSIDE its own box rather than taking the page
   with it. Columns are deliberately NOT dropped at narrow widths: this site's
   whole claim is that every figure carries its sample, and hiding the sample
   on a phone to make a table fit is exactly the wrong trade. */
.tbl{overflow-x:auto;overscroll-behavior-x:contain}
h1,h2,h3{font-family:Archivo,ui-sans-serif,system-ui,sans-serif;margin:0;
  text-wrap:balance;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(28px,6.2vw,42px);line-height:1.04}
h2{font-weight:700;font-size:clamp(17px,3.2vw,21px);margin-top:34px}
h3{font-weight:700;font-size:12.5px;color:var(--ink-2)}
p{margin:13px 0 0}
a{color:var(--navy)}
.crumb{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* identity */
.hero{display:flex;gap:16px;align-items:center;margin-top:12px}
.shot{position:relative;flex:0 0 auto;width:74px;height:74px;border-radius:50%;
  overflow:hidden;background:var(--sunk);border:1px solid var(--rule);
  display:grid;place-items:center}
/* the image COVERS the initials rather than sitting beside them, so a slow,
   blocked or 404 image degrades to initials instead of a blank hole */
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:var(--sunk)}
.shot .ini{font-family:Archivo;font-weight:800;font-size:25px;color:var(--ink-3)}
.ident{margin-top:6px;font-size:15px;color:var(--ink-2)}
.ident b{color:var(--ink)}
.role{display:inline-block;margin-left:7px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.05em;padding:3px 9px;border-radius:99px;
  background:var(--green-soft);color:var(--green)}
/* the one-line answer, so nothing needs digging for */
.summary{margin-top:20px;font-size:17px;line-height:1.55;text-wrap:pretty;
  border-left:3px solid var(--green);padding-left:15px}
.summary b{font-weight:600}
/* big numbers */
.proj{margin-top:18px;display:grid;
  /* 124px LEFT A DEAD CELL. At 390px only two tiles fit, so a row of
     three wrapped to 2 + 1 and the fourth cell was an empty box beside
     "Plan" -- which reads as something missing rather than as a layout.
     108px fits three across the narrowest phone this site is built for. */
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.proj div{background:var(--surface);padding:13px 15px}
/* TWO LINES OF ROOM WHETHER THE LABEL NEEDS THEM OR NOT. At phone width
   "QUESTIONS TODAY" wraps and "SAVED" does not, so the big numbers under
   them sat at different heights and the row read as three unrelated boxes
   rather than one comparison. */
.proj .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  line-height:1.35;min-height:2.7em;display:flex;align-items:flex-start}
.proj div{display:flex;flex-direction:column}
.proj .c{margin-top:auto}
.proj .v{font-family:Archivo;font-weight:800;font-size:25px;margin-top:2px;
  font-variant-numeric:tabular-nums}
.proj .c{font-size:11.5px;color:var(--ink-3);margin-top:1px}
/* --- saved chats on the account page ------------------------------------
   A LIST, NOT A TABLE. This was four columns -- when, the question, what we
   said, and a link -- which cannot work at 390px: the question column
   collapsed to about nine characters and the answer to none. A saved item
   is one thing with a few facts about it, which is a card, and a card
   stacks at any width without a horizontal scrollbar nobody finds. */
.saved{list-style:none;margin:14px 0 0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.saved li{background:var(--surface);border:1px solid var(--rule);
  border-radius:11px;padding:14px 16px}
.saved .q{font:600 15.5px/1.45 Archivo,sans-serif;color:var(--ink);margin:0}
.saved .a{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.saved .meta{margin-top:11px;padding-top:10px;
  border-top:1px solid var(--rule-2);display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;font-size:12px;color:var(--ink-3)}
/* THE ACTIONS GO RIGHT ON A WIDE ROW AND WRAP TO THEIR OWN LINE ON A
   NARROW ONE. `margin-left:auto` inside a wrapping flex row puts them at
   the end of whichever line they land on, which is what you want in both
   cases and is why this is not a media query. */
.saved .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.saved .again{display:inline-block;padding:6px 12px;border-radius:8px;
  background:var(--navy);color:var(--on-navy);text-decoration:none;font-size:12.5px;
  font-weight:600}
.saved .again:hover{filter:brightness(1.08)}
.saved .drop{background:0;border:1px solid var(--rule);border-radius:8px;
  padding:6px 11px;font:inherit;font-size:12.5px;color:var(--ink-3);
  cursor:pointer}
.saved .drop:hover{color:var(--ink-2);border-color:var(--ink-3)}
/* --- the chart dashboard ------------------------------------------------
   TWO COLUMNS WHERE THERE IS ROOM, one where there is not. A chart is
   read, not scanned, so the tiles are generous rather than dense -- a
   grid of six thumbnails nobody can read is a worse dashboard than three
   charts somebody can. */
.widgrid{display:grid;gap:16px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  /* EACH TILE KEEPS ITS OWN HEIGHT. A grid stretches its items to the
     tallest in the row, and these charts have wildly different aspect
     ratios -- a 15-row ranking beside a six-game line left the short one
     sitting in a box half of which was empty, which reads as a broken
     tile rather than as two charts of different shapes. */
  align-items:start}
.widgrid .wid{margin:0;padding:14px 14px 10px;background:var(--surface);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.widgrid .wid svg{display:block;width:100%;height:auto}
/* `.widgrid .wid` RATHER THAN `.wid`, because `figure:first-child` -- which
   gives a lone figure in the thread its top margin -- scores (0,1,1) and
   would beat a bare `.wid` (0,1,0). The first tile in the grid would sit
   16px lower than the one beside it, on the first row only. */
.widgrid .wid figcaption{display:flex;align-items:center;gap:10px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--rule-2);font-size:12.5px;
  color:var(--ink-3)}
.widgrid .wid figcaption>span{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.widgrid .wid .drop{margin-left:auto;flex:0 0 auto;background:0;
  border:1px solid var(--rule);border-radius:8px;color:var(--ink-3);
  font:inherit;font-size:12px;cursor:pointer;padding:5px 9px}
.widgrid .wid .drop:hover{color:var(--ink-2);border-color:var(--ink-3)}
/* A TILE THAT CANNOT BE DRAWN SAYS SO. An empty box would read as a
   rendering fault; the reason is a fact about the data, not about us. */
.widoff{margin:0;padding:26px 8px;text-align:center;font-size:13px;
  line-height:1.6;color:var(--ink-3)}
.emptysave{margin-top:14px;background:var(--sunk);border:1px solid var(--rule-2);
  border-radius:11px;padding:18px 18px;color:var(--ink-2);font-size:14px;
  line-height:1.6}
.emptysave b{color:var(--ink)}
.acct-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-top:2px;color:var(--ink-3);font-size:13.5px}
.acct-foot{margin-top:26px;padding-top:16px;
  border-top:1px solid var(--rule-2)}
.flag{margin-top:15px;background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--warn);border-radius:8px;padding:12px 15px;
  font-size:14px;color:var(--ink-2)}
.flag b{color:var(--ink)}
/* tables that read as shapes, not digits */
.tbl{margin-top:16px;overflow-x:auto;background:var(--surface);
  border:1px solid var(--rule);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:9px 13px;text-align:right;white-space:nowrap}
/* TABLES MUST FIT, not scroll. A horizontal scrollbar on a data table means
   the columns on the right are effectively invisible -- nobody discovers
   them. So the least important columns drop out as the viewport narrows,
   and the header and cell both carry .opt so the two never misalign. */
@media (max-width:1150px){ th,td{padding:8px 10px} }
@media (max-width:1000px){ .opt:nth-last-child(2){display:none} }
@media (max-width:860px){ .opt{display:none} }
/* iOS SAFARI ZOOMS THE WHOLE PAGE when a focused form control is under 16px,
   and the player search sits in the header of every page at 13.5px while the
   rankings selects were 13px. Tapping search therefore zoomed the layout and
   the reader had to pinch back out -- on the one control the site most wants
   people to use. 16px is the threshold, not a preference. */
@media (max-width:640px){
  /* Matched to the SAME selectors that set the small sizes. A media query
     adds no specificity, so a bare `input` loses to `.side .srch input`
     every time -- the first attempt at this rule changed nothing at all and
     the measurement said so. */
  input,select,textarea,
  .srch input,.side .srch input,.bar select{font-size:16px}
  /* And a thumb is about 44px. These were all 33px: the rankings filter
     chips AND the example prompts under the ask box, which are the first
     thing a new visitor taps. Matched by their real selectors -- the first
     version of this rule missed `.eg button` entirely and the measurement
     said so. */
  .bar button,.bar a,.chip,.eg button,.askrow{min-height:40px}
}
@media (max-width:560px){ th,td{padding:7px 8px;font-size:12.5px}
  .tbl table{font-size:12.5px} }
th:first-child,td:first-child{text-align:left}
/* 12px, NOT 10px. Lighthouse counts anything under 12px as illegible, and
   a table header is the label that tells a reader what the column IS --
   the last thing that should be the smallest text on the page. */
thead th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--rule)}
tbody tr{border-bottom:1px solid var(--rule-2)}
tbody tr:last-child{border-bottom:0}
tbody td{font-family:"IBM Plex Mono",ui-monospace,monospace}
tbody td:first-child{font-family:inherit;font-weight:500}
tr.hi td{background:var(--sunk);font-weight:600}
.mini{display:inline-block;width:46px;height:7px;border-radius:3px;
  background:var(--rule-2);vertical-align:middle;margin-right:7px;overflow:hidden}
.mini i{display:block;height:100%;border-radius:3px;background:var(--navy)}
/* Target share is a CATEGORY beside snap share, not a gain. */
.mini.g i{background:var(--c-alt)}
/* deltas */
.d{display:inline-block;min-width:52px;text-align:right;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;
  padding:2px 8px;border-radius:5px;background:var(--flat-soft);color:var(--flat)}
.d.up{background:var(--green-soft);color:var(--green)}
.d.out{background:transparent;color:var(--warn)}
/* --- ONE TREATMENT FOR EVERY FIGURE, AND IT IS NOT A CARD -----------------
   There were three: `figure` on the pages with a --surface fill and a
   --rule border, `.fig` in the chat CSS with a --sunk fill and a --rule-2
   border, and `#answer .fig` with no fill at all. Same component, three
   looks, which is the duplicated-renderer pattern in CSS.

   TRANSPARENT, because a chart is evidence for the sentence above it and
   not a separate object. A run of five charts in one answer became five
   stacked cards -- the identical-rounded-box kit that reads as generated.
   The SVGs already paint no background of their own, so this is the only
   thing that was making them boxes.

   A HAIRLINE ABOVE RATHER THAN A BOX AROUND. The line is doing real work:
   it says where one reading stops and the next begins, which in a run of
   five is the whole question. A border on four sides says it four times.

   Anything that LEAVES the site keeps its own background -- the share
   cards bake one deliberately, because a transparent PNG on somebody
   else's timeline is unreadable. */
/* --- the chart gallery --------------------------------------------------
   One chart visible, the rest a swipe or a button away. Five stacked
   charts is a page you scroll past; a set you can step through is one you
   compare. The track is a scroll-snap row, so touch and trackpad work
   with no code and the buttons drive the same scroll rather than a second
   mechanism that could disagree with it. */
.gal{margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--rule-2)}
/* NO `scroll-behavior:smooth`, AND IT IS NOT AN OVERSIGHT.
   Measured in the browser: with `scroll-snap-type: x mandatory`, a smooth
   scroll is silently CANCELED -- assigning scrollLeft=720 left it at 0,
   and the identical assignment under `scroll-behavior:auto` moved it. The
   same happened through scrollTo({behavior:'smooth'}), so it is the snap
   and not the API. Nothing logs; the buttons just do nothing, which is
   how this reached a screenshot twice.
   A finger-driven swipe still animates, because the finger is the
   animation. A button press jumps, which for stepping through a set of
   charts is the honest behavior anyway. */
.gal-view{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.gal-view::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.gal-slide svg{display:block;width:100%;height:auto}
.gal-bar{display:flex;align-items:center;gap:7px;margin-top:11px}
.gal-bar>button{background:0;border:1px solid var(--rule);border-radius:8px;
  color:var(--ink-3);font:inherit;font-size:13px;line-height:1;cursor:pointer;
  padding:6px 10px}
.gal-bar>button:hover:not(:disabled){color:var(--ink);border-color:var(--navy)}
.gal-bar>button:disabled{opacity:.35;cursor:default}
.gal-at{font-size:12px;color:var(--ink-3);margin-left:4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.gal-at b{color:var(--ink-2);font-weight:600}
.gal-dots{display:flex;gap:6px;margin-left:auto;align-items:center}
/* THE DOTS ARE BUTTONS, so they need a real hit area even though the mark
   is 7px. Padding gives the target without growing the dot. */
.gal-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:var(--rule);cursor:pointer;box-sizing:content-box;
  border:5px solid transparent;background-clip:content-box}
.gal-dot.on{background:var(--navy);background-clip:content-box}
.gal-dot:hover{background:var(--ink-3);background-clip:content-box}
/* THE DOTS CARRY THE AUTO MARGIN and the pin rides after them, so the two
   move right as one group. A second `margin-left:auto` in the same flex
   row does not right-align a second time -- it splits the free space, and
   the bar ends up with a gap in the middle. */
.gal-pin{display:flex;align-items:center;margin-left:8px}
.fig-bar{display:flex;justify-content:flex-end;margin-top:11px}
.fig-pin{display:inline-flex;align-items:center;gap:6px;background:0;
  border:1px solid var(--rule);border-radius:8px;color:var(--ink-3);
  font:inherit;font-size:12.5px;line-height:1;cursor:pointer;padding:6px 9px}
.fig-pin:hover:not(:disabled){color:var(--ink);border-color:var(--navy)}
.fig-pin:disabled{opacity:.5;cursor:default}
/* THE MARK IS THE STATE. A bookmark outline that fills when kept says
   "this is held" without spending a palette color that already means
   something else -- green is a gain and the warn hue is a loss, and a
   saved chart is neither. */
.fig-pin-i{width:9px;height:12px;border:1.5px solid currentColor;
  border-bottom:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.fig-pin[aria-pressed=true]{color:var(--navy);border-color:var(--navy)}
.fig-pin[aria-pressed=true] .fig-pin-i{background:currentColor}
.fig-pin.needs{color:var(--ink-2);border-color:var(--ink-3)}
@media (max-width:620px){ .fig-pin-t{display:none} .fig-pin{padding:7px} }
figure,.fig{margin:24px 0 0;padding:16px 0 0;background:0;border:0;
  border-top:1px solid var(--rule-2);border-radius:0;overflow-x:auto}
figure:first-child,.fig:first-child{margin-top:16px}
figcaption{margin-top:11px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
figcaption b{color:var(--ink-2)}
svg{display:block;width:100%;height:auto}
.key{display:flex;gap:16px;margin-top:9px;font-size:12.5px;color:var(--ink-2)}
.key i{display:inline-block;width:16px;height:3px;border-radius:2px;
  vertical-align:middle;margin-right:6px;font-style:normal}
/* A SWATCH, for a legend that keys a CELL color rather than a line
   series. `.key i` is a 16x3 rule, which reads as "this line" and not as
   "this value". Wraps, because two legends and a phone width is how a row
   of chips silently loses its last item. */
.key{flex-wrap:wrap;gap:10px 18px}
/* THE RATING ROW IS FURNITURE, NOT A CALL TO ACTION. It sits under the
   sources line at the same weight, because an answer people did not want
   to rate is the normal case and a loud widget would make skipping it feel
   like a refusal. */
.rate{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:12px;color:var(--ink-3);
  /* WRAPS, because the reason chips are four phrases rather than two
     words and a phone column is ~358px. Without this the last one runs
     off the right edge, which is where "Hard to follow" would have been
     -- the chip most likely to be about the thing it could not show. */
  flex-wrap:wrap;row-gap:6px}
.rate button{background:none;border:1px solid var(--rule);color:var(--ink-3);
  border-radius:99px;padding:2px 10px;font:inherit;cursor:pointer}
.rate button:hover{border-color:var(--navy);color:var(--ink-2)}
/* SAVED IS A STATE, NOT A FLASH. The button stays pressed so a reader can
   see, later in the thread, which answers they kept -- and press it again
   to unkeep one without going to the account page. */
.rate button.keep[aria-pressed=true]{border-color:var(--navy);
  color:var(--navy);font-weight:600}
/* THE PROJECTED ROW IN A GAME LOG. It sits above played games and must
   never read as one of them: a tinted band and a hairline under it say
   "this has not happened" before any cell is read. */
tr.pjr td{background:var(--sunk);border-bottom:1px solid var(--rule)}
tr.pjr td:first-child{box-shadow:inset 2px 0 0 var(--green)}
.key .k{display:inline-flex;align-items:center}
.key i.sw{width:9px;height:9px;border-radius:2.5px}
.key i.sw.up{background:var(--green)}
.key i.sw.dn{background:var(--warn)}
.cta{margin-top:18px;display:block;background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.cta:hover{border-color:var(--navy)}
.cta b{display:block;font-size:15.5px;font-weight:600}
.cta span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.meta{margin-top:24px;padding-top:15px;border-top:1px solid var(--rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--ink-3);line-height:1.8}
.empty{margin-top:16px;background:var(--sunk);border:1px dashed var(--rule);
  border-radius:10px;padding:16px;font-size:14px;color:var(--ink-3)}
@media (max-width:520px){ .hero{gap:13px} .shot{width:58px;height:58px}
  .shot .ini{font-size:20px} }