:root{
  /* ---- the sixteen colors -------------------------------------------------
     Every color on the page is one of these, so the whole look is sixteen
     values and nothing else - no rule below this line knows what they are. */
  --mast:#123243; --mast-ink:#F2F6F8;
  --ground:#FCFCFB; --panel:#F0F3F4; --sunk:#E4E9EB; --raise:#FFFFFF;
  --line:#A7B0B6; --hair:#E3E7E9; --text:#14181C; --dim:#3D454C; --faint:#69727A;
  --gold:#8F5D0C; --gold-bar:#D09A2E; --gold-wash:rgba(208,154,46,.12);
  --azure:#1F5B87; --azure-bar:#4A8BB8; --azure-wash:rgba(74,139,184,.13);

  /* The mana pips are deliberately not part of a palette.  A blue pip is blue
     because the card is blue; it follows the ground's lightness and nothing
     else. */
  --pipW:#D9C88A; --pipU:#3B7DB8; --pipB:#4A4A52; --pipR:#C4553B; --pipG:#4A8C5A;
  --pipC:#B4B0A6;
  --shadow:0 1px 0 rgba(20,24,27,.05), 0 8px 24px -16px rgba(20,24,27,.35);

  /* ---- type and spacing ---------------------------------------------------
     Behind variables the same way, so the metrics of the whole site are one
     block to read and one block to change. */
  --f-sans:Inter,Arial,Helvetica,sans-serif;
  --f-head:Inter,Arial,sans-serif;      /* h1, h2 */
  --f-name:Inter,Arial,sans-serif;      /* the name column */
  --f-mono:Inter,Arial,sans-serif;
  --f-label:Inter,Arial,sans-serif;     /* eyebrows, column heads */
  --lab-fs:12px;
  --fs-body:13px; --fs-name:13.5px; --fs-num:13px; --fs-val:13px;
  --fs-h1:32px; --fs-h2:21px; --lh-body:1.42;
  --row-h:26px; --td-pt:1px; --td-pb:1px; --td-px:8px;
  --wrap:1240px; --zebra:transparent;
}

/* ---- the five, one a day ---------------------------------------------------
   Eleven of the sixteen values move with the day's color: the masthead, the
   paper, the rules and the ink on them.  The accent pair does not, because
   gold and azure are not decoration - they are what a number's sign looks
   like, and a reader who has learned that gold is up should not have to
   learn it again on a Thursday.  The pips do not either, for the reason no
   pip ever does. */
:root[data-mana="W"]{
  --mast:#8A6B2A; --mast-ink:#FDF8EA;
  --ground:#FDFCF6; --panel:#F5F1E4; --sunk:#ECE5D2; --raise:#FFFFFF;
  --line:#C3B79A; --hair:#E9E3D1; --text:#1D1A12; --dim:#56503F; --faint:#8A8370;
}
@media (prefers-color-scheme: dark){
  :root[data-mana="W"]{
    --mast:#3D2E10; --mast-ink:#F6EDD6;
    --ground:#14120B; --panel:#1E1B12; --sunk:#0C0A06; --raise:#242015;
    --line:#433C29; --hair:#29241A; --text:#F1EADA; --dim:#A29981; --faint:#786F5C;
  }
}
:root[data-mana="U"]{
  --mast:#0E3A5C; --mast-ink:#E8F3FA;
  --ground:#F8FBFD; --panel:#E9F1F7; --sunk:#DAE7F0; --raise:#FFFFFF;
  --line:#9AB2C4; --hair:#DDE8F0; --text:#0D1620; --dim:#38495A; --faint:#68798A;
}
@media (prefers-color-scheme: dark){
  :root[data-mana="U"]{
    --mast:#07243B; --mast-ink:#DFEEF8;
    --ground:#08121A; --panel:#101D28; --sunk:#050C11; --raise:#152530;
    --line:#2C414F; --hair:#182833; --text:#E1EDF5; --dim:#8FA4B4; --faint:#657A89;
  }
}
:root[data-mana="B"]{
  --mast:#241F26; --mast-ink:#EFEBF1;
  --ground:#FAF9FA; --panel:#EFEDF0; --sunk:#E2DFE5; --raise:#FFFFFF;
  --line:#A8A2AD; --hair:#E4E1E7; --text:#16131A; --dim:#453F4C; --faint:#736C7A;
}
@media (prefers-color-scheme: dark){
  :root[data-mana="B"]{
    --mast:#120F14; --mast-ink:#E7E2EB;
    --ground:#0E0C10; --panel:#171419; --sunk:#080609; --raise:#1D1A20;
    --line:#38333D; --hair:#211D25; --text:#E9E4EE; --dim:#9A93A2; --faint:#6F6877;
  }
}
:root[data-mana="R"]{
  --mast:#7A1F16; --mast-ink:#FBEBE7;
  --ground:#FEFAF9; --panel:#F7EEEC; --sunk:#EFE0DD; --raise:#FFFFFF;
  --line:#C6A9A4; --hair:#EDE0DD; --text:#1E1413; --dim:#55423F; --faint:#877069;
}
@media (prefers-color-scheme: dark){
  :root[data-mana="R"]{
    --mast:#2E0C08; --mast-ink:#F7DFD9;
    --ground:#130D0C; --panel:#1E1513; --sunk:#0C0807; --raise:#251A18;
    --line:#42302C; --hair:#281D1B; --text:#F1E4E1; --dim:#A38F8A; --faint:#776663;
  }
}
:root[data-mana="G"]{
  --mast:#1B4526; --mast-ink:#E9F4EC;
  --ground:#FAFCF8; --panel:#EDF3EA; --sunk:#E0E9DC; --raise:#FFFFFF;
  --line:#A2B59D; --hair:#E2E9DE; --text:#131A12; --dim:#43523F; --faint:#74836F;
}
@media (prefers-color-scheme: dark){
  :root[data-mana="G"]{
    --mast:#0C2A15; --mast-ink:#E0F0E5;
    --ground:#0B120C; --panel:#141D16; --sunk:#070C08; --raise:#1A241C;
    --line:#31402F; --hair:#1E291F; --text:#E5EFE6; --dim:#93A594; --faint:#697B6B;
  }
}

/* ---- dark ----------------------------------------------------------------
   The same sixteen values, lifted.  The accent pair is not a lighter gold and
   a lighter azure for decoration's sake: they are what a number's sign looks
   like, and they have to carry the same weight on a dark ground as on a light
   one. */
@media (prefers-color-scheme: dark){
  :root{
    --mast:#0B1F2B; --mast-ink:#E9F0F4;
    --ground:#0F1418; --panel:#192127; --sunk:#0A0E12; --raise:#1E262D;
    --line:#3A444D; --hair:#232C34; --text:#E7ECF0; --dim:#98A3AD; --faint:#6C7883;
    --gold:#E5B155; --gold-bar:#C6892A; --gold-wash:rgba(198,137,42,.12);
    --azure:#79B4D9; --azure-bar:#4A8BB8; --azure-wash:rgba(74,139,184,.13);
    --pipW:#E8DCAE; --pipU:#5B9BD5; --pipB:#6B6B76; --pipR:#D97258; --pipG:#68AE79;
    --pipC:#8E8A82;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-sans);
  font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px 96px}
h1,h2,h3{font-family:var(--f-head); text-wrap:balance; margin:0}
/* The title is the way home, so it says so on hover and nowhere else - an
   underlined masthead reads as a link that goes somewhere else. */
.brand h1 a{color:inherit; text-decoration:none}
.brand h1 a:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.brand .dot{display:inline-block; margin-left:.2em}
/* One of the five, chosen by the date: the same symbol for everybody all day,
   and a different one tomorrow.  It is not on the palette, for the reason no
   pip is - a red symbol is red because it is red. */
.brand .dot svg{display:block; width:.62em; height:.62em; margin-bottom:.06em}
.brand .dot .ink{fill:var(--mast)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-label); font-size:var(--lab-fs); font-weight:600;
  color:var(--faint)}
/* A rating's hue says which way it goes; how far the hue is pushed says how
   far.  --k is set per cell where a table knows its own range; everywhere else
   it defaults to 1 and the color is what it always was. */
.pos{color:color-mix(in oklab, var(--gold) calc(var(--k, 1) * 100%), var(--dim))}
.neg{color:color-mix(in oklab, var(--azure) calc(var(--k, 1) * 100%), var(--dim))}
a{color:inherit; text-decoration-color:var(--hair); text-underline-offset:3px}
a:hover{color:var(--gold); text-decoration-color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--line); margin-bottom:30px; background:var(--panel)}
.mast-in{max-width:var(--wrap); margin:0 auto; padding:26px 28px 22px;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 32px}
.brand{flex:1 1 320px; min-width:0}
.brand h1{font-size:clamp(30px,4.4vw,var(--fs-h1)); font-weight:700; letter-spacing:-.015em; line-height:1.02}
.brand h1 .dot{color:var(--gold)}
.brand p{margin:7px 0 0; color:var(--dim); font-size:14.5px; max-width:58ch}
.stamp{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end; padding-bottom:3px}
.stamp > div{display:flex; flex-direction:column; gap:3px}
/* Which format this is, opposite the name: the one fact about the whole site
   that is nowhere else on the page. */
.fmt{font-family:var(--f-mono); font-size:13px; color:var(--mast-ink); opacity:.7}
.stamp .v{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; letter-spacing:-.02em}

/* ---------- section headers ---------- */
.sec{margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px 22px; flex-wrap:wrap}
.sec h2{font-size:var(--fs-h2); font-weight:600; letter-spacing:-.012em}
.sec p{margin:0; color:var(--dim); font-size:13.5px; max-width:62ch; flex:1 1 300px}
section.block, details.block{margin-bottom:52px}

/* Every section folds.  The heading is the control, so the native disclosure
   triangle is suppressed and a chevron sits at the far end of the rule. */
summary.sec{cursor:pointer; list-style:none; user-select:none}
summary.sec::-webkit-details-marker{display:none}
summary.sec::after{content:""; flex:0 0 auto; margin-left:auto; width:8px; height:8px;
  border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
  transform:rotate(-45deg); transition:transform .14s}
details[open]>summary.sec::after{transform:rotate(45deg) translateY(-3px)}
summary.sec:hover h2{color:var(--gold)}
summary.sec:hover::after{border-color:var(--gold)}
summary.sec:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- color pips ---------- */
/* A pip is a circle and the type beside it is a serif with a tall ascender,
   so centring the two boxes on each other leaves the circles sitting low
   against the letters they belong to. */
.pips{display:inline-flex; gap:2px; vertical-align:middle; margin-right:7px;
  position:relative; top:-1px}
.pip{width:9px; height:9px; border-radius:50%; display:block; border:1px solid rgba(0,0,0,.22)}
.pip.W{background:var(--pipW)} .pip.U{background:var(--pipU)} .pip.B{background:var(--pipB)}
.pip.R{background:var(--pipR)} .pip.G{background:var(--pipG)}
.pip.C{background:var(--pipC)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:660px}
thead th{font-family:var(--f-label); font-size:var(--lab-fs); font-weight:600;
  color:var(--faint);
  text-align:left; padding:11px 10px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
thead th.s{cursor:pointer; user-select:none}
thead th.s:hover{color:var(--text)}
thead th.s:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
/* The same mark the deck lab uses: gold for the column being sorted on, and
   an arrow for which way. */
thead th[aria-sort]{color:var(--gold)}
thead th[aria-sort]::after{content:"\2193"; margin-left:4px; font-size:9px}
thead th[aria-sort="ascending"]::after{content:"\2191"}
th.num,td.num{text-align:right}
tbody tr{border-bottom:1px solid var(--hair)}
/* Striping is a design's choice, so it is a token: transparent everywhere but
   in the designs that ask for it.  Detail rows are skipped - they belong to
   the row above, not to the alternation. */
tbody tr:not(.detail):nth-child(even){background:var(--zebra)}
/* Two pixels of it above and none below, which puts the type a pixel below
   the middle of the row - where it looks centred. */
td{padding:var(--td-pt) var(--td-px) var(--td-pb); height:var(--row-h); vertical-align:middle}
td.rank{font-family:var(--f-mono); font-size:12px; color:var(--faint); width:44px}
/* A finishing place is not signed, so it runs from faint to full in one hue. */
td.rank.grad{color:color-mix(in oklab, var(--gold) calc(var(--k, 1) * 100%), var(--dim))}
td.name{font-family:var(--f-name); font-size:var(--fs-name); font-weight:500;
  max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-num); color:var(--dim); width:86px}
/* A signed number is a number: it aligns with the rest of them.  Only the two
   tables that also marked their value columns `num` were getting this. */
td.val{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-val); font-weight:500; width:82px; text-align:right}
/* The cards and pilots tables mark their value columns `val num`, and td.num's
   dim gray outranked the bare .pos/.neg - so those two tables were the only
   ones printing their ratings in gray.  The scale differs from table to table;
   the sign is what the color says. */
td.val.pos{color:color-mix(in oklab, var(--gold) calc(var(--k, 1) * 100%), var(--dim))}
td.val.neg{color:color-mix(in oklab, var(--azure) calc(var(--k, 1) * 100%), var(--dim))}

/* the spine: a zero axis running the height of the table */
td.spine{width:220px; padding:2px 14px 0 10px}
/* Short on purpose.  The rail used to be the height of a row, which made it -
   and not the type - the thing that set the row's height: every table with a
   spine ran seven pixels taller than every table without one. */
.track{position:relative; height:20px}
.track::before{content:""; position:absolute; top:0; bottom:0; left:var(--zero); width:1px; background:var(--line)}
.bar-fill{position:absolute; top:50%; transform:translateY(-50%); height:7px; border-radius:1px}
.bar-fill.gp{background:var(--gold-bar); left:var(--zero)}
.bar-fill.gn{background:var(--azure-bar)}

/* ---------- the field ---------- */
tr.deck{cursor:pointer}
tr.deck:hover{background:var(--panel)}
/* An open row is the head of the panel underneath it, so it takes the panel's
   own ground rather than a color.  A brown wash across the whole row fought
   the washes in the cells, which are the only marks on it that mean a number;
   a rule down the left says "open" without spending a color to say it. */
tr.deck[aria-expanded="true"]{background:var(--panel)}
tr.deck[aria-expanded="true"]>td:first-child{box-shadow:inset 3px 0 0 var(--gold-bar)}
tr.deck:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
td.share{width:190px; padding-right:16px}
.sharebar{position:relative; height:8px; background:var(--sunk); border-radius:1px; overflow:hidden}
.sharebar span{position:absolute; inset:0 auto 0 0;
  background:color-mix(in oklab, var(--gold-bar) calc(var(--k, 1) * 100%), var(--hair))}
tr.detail>td{padding:0; height:auto; background:var(--panel)}
.det{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:26px 34px; padding:20px 24px 24px}
@media(max-width:820px){.det{grid-template-columns:1fr}}
.det h4{font-family:var(--f-name); font-size:15px; font-weight:600; margin:0 0 9px}
.det .note{margin:-4px 0 10px; font-size:12px; color:var(--faint); max-width:46ch}
.cardlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1px 16px}
.cl{display:flex; gap:8px; align-items:baseline; font-size:var(--fs-name); padding:2px 0}
.cl b{font-family:var(--f-mono); font-weight:500; color:var(--faint); width:14px}
.cl span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cl>i{font-family:var(--f-mono); font-style:normal; font-size:var(--fs-val);
  font-variant-numeric:tabular-nums; min-width:44px; text-align:right;
  align-self:stretch; display:flex; align-items:center; justify-content:flex-end;
  margin-block:-2px}
.cl>i.mrg{min-width:40px}
/* One grid for the whole list, with each row spilling its cells into it via
   display:contents.  Laying the rows out independently let a four-digit game
   count widen its own row and shove the rating out of line with the rest. */
.mu{display:grid; grid-template-columns:minmax(0,1fr) 62px 66px; gap:3px 12px;
  align-items:baseline}
.mu>div{display:contents}
.mu>div>span{font-size:var(--fs-name); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mu>div>i{font-family:var(--f-mono); font-style:normal; font-size:var(--fs-val);
  font-variant-numeric:tabular-nums; font-weight:500; text-align:right;
  padding:1px 7px; border-radius:2px}
.mu>div:not(.muhead)>i{align-self:stretch; display:flex; align-items:center;
  justify-content:flex-end; margin-block:-1.5px}
.mu .muhead>i{padding:1px 7px}
.mu>div>em{font-family:var(--f-mono); font-style:normal; font-size:12px;
  font-variant-numeric:tabular-nums; color:var(--faint); text-align:right}
.mu .empty{grid-column:1/-1}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--panel)}
tr.clickable[aria-expanded="true"]{background:var(--panel)}
tr.clickable[aria-expanded="true"]>td:first-child{box-shadow:inset 3px 0 0 var(--gold-bar)}
tr.clickable:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.det1{padding:14px 18px 18px}
/* One column of prose became two of content, so the width cap goes; the grid
   inside it carries the measure instead. */
.det1>.det{padding:0}
.det1>.det.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.det1 h4{font-family:var(--f-name); font-size:14px; font-weight:600; margin:0 0 8px}
.det1>.note{margin:18px 0 0; font-size:12px; color:var(--faint); max-width:52ch}
.jump{font:inherit; font-size:var(--fs-name); text-align:left; padding:0; border:0; background:none;
  color:inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:underline; text-decoration-style:dotted; text-decoration-color:var(--hair);
  text-underline-offset:3px}
.jump:hover{text-decoration-color:var(--gold); color:var(--gold)}
/* In the match view a jump is the heading itself, or the number in a cell, so
   it takes the type it is standing in rather than the table's. */
.mvhead h3 .jump{font-size:inherit; font-weight:inherit}
.mvsum td .jump{font-size:inherit; font-weight:inherit;
  font-variant-numeric:tabular-nums; overflow:visible}
.jump:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@keyframes flash{from{background:var(--gold-wash)} to{background:transparent}}
tr.deck.flash>td, tr.clickable.flash>td{animation:flash 1.4s ease-out}
/* A header that wraps drops its underline below the others, because a
   two-line box puts its baseline on the first line.  These are three short
   words; they do not need to wrap, and pinning them to the bottom of the row
   keeps the rule straight even if one ever does. */
.mu .muhead>*{font-family:var(--f-mono); font-size:10px; font-weight:500; color:var(--faint); font-style:normal;
  white-space:nowrap; align-self:end;
  border-bottom:1px solid var(--hair); padding-bottom:3px; margin-bottom:2px}

/* ---------- deck lab ---------- */
.lab{border:1px solid var(--line); border-radius:3px; background:var(--panel); overflow:hidden}
.field-band{padding:16px 20px 18px; border-bottom:1px solid var(--line); background:var(--sunk)}
/* ---- how much room the field is allowed ---------------------------------
   Three sizes of the same controls, because the band is scenery once you have
   chosen who you are beating - and a quarter of the screen of scenery above
   the deck you came to build is a quarter of the screen too many.

   tight: the chips are a scroll box two rows deep and the weights are denser.
   bar:   one line saying what the field is, and an Edit button that puts the
          whole band back for as long as you need it. */
.field-band{padding:12px 20px 13px}
.field-band .hd{margin-bottom:8px}
.chips{max-height:70px; overflow-y:auto; padding-right:4px}
.weights{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:0 26px; margin-top:9px; padding-top:8px}
.wrow{font-size:12.5px; padding:1px 0;
  grid-template-columns:minmax(0,1fr) 88px 44px}
/* Folded: nothing but the chevron and a line saying who you are beating.  Open
   it and the whole band is there - the buttons, the chips and the weights -
   because a half-sized version of the controls is a third thing to learn.
   It folds at every field size, not only at "bar": "bar" is which state the
   band *starts* in, not the only state it has.  Tying the fold to one size
   meant a phone, which gets "tight", had a chevron that did nothing. */
.lab.folded .field-band{padding:9px 20px 10px}
.lab.folded .hd{margin-bottom:0}
.lab.folded .hdrest, .lab.folded .chips, .lab.folded .weights{display:none}
.lab:not(.folded) .fsum{display:none}
.fchev{display:inline-flex; align-items:center; gap:8px; font:inherit; color:inherit;
  border:0; background:none; padding:0; cursor:pointer;
  flex:1 1 auto; justify-content:flex-start; min-width:0}
.fchev svg{display:block; width:11px; color:var(--faint); transition:transform .12s}
.fchev:hover svg, .fchev:hover .eyebrow{color:var(--gold)}
.fchev[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdrest{display:contents}
/* The one-line summary: what you are beating, in the order it matters. */
.fsum{align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:12.5px; color:var(--dim); margin-top:7px}
.lab.folded .fsum{display:flex}
.fsum .fd{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap}
.fsum .fd em{font-style:normal; font-family:var(--f-mono); font-size:11.5px;
  color:var(--faint)}
.fsum .fd.pin em{color:var(--azure)}
.fsum .more{color:var(--faint)}
.field-band .hd{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:11px}
.field-band .hd{cursor:pointer}
.field-band .hd p{margin:0; color:var(--dim); font-size:12.5px; flex:1 1 260px}
/* The named opponent sits where the chips do, because it replaces them. */
.oppcard[hidden]{display:none}
.oppcard{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 12px; margin:0 0 10px; border:1px solid var(--azure);
  background:var(--azure-wash); border-radius:2px}
.oppcard .who{font-family:var(--f-name); font-size:14.5px; color:var(--text)}
.oppcard .mono{font-family:var(--f-mono); font-size:11.5px; color:var(--dim)}
.oppcard .miss{color:var(--faint); cursor:help}
.oppcard .mini{margin-left:auto}
/* Still reachable - picking one is how you leave the named list - but no
   longer the thing the pane is about. */
/* Against one named opponent the pane is a pairing, and the archetype beside
   "Your deck" is the picker's job, not the heading's. */
.lab.named .dname{display:none}
.lab.named .chips{opacity:.55}
.lab.named .chips:hover{opacity:1}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px;
  border:1px solid var(--line); border-radius:2px; background:var(--panel); color:var(--dim);
  font-size:12.5px; cursor:pointer; font-family:inherit}
.chip:hover{border-color:var(--azure)}
.chip:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.chip[aria-pressed="true"]{background:var(--azure-wash); border-color:var(--azure); color:var(--text)}
.chip .w{font-family:var(--f-mono); font-size:11px; font-variant-numeric:tabular-nums; color:var(--faint)}
.chip[aria-pressed="true"] .w{color:var(--azure)}
.mini{font-family:var(--f-mono); font-size:11px; padding:5px 10px; border:1px solid var(--line);
  background:var(--panel); color:var(--dim); border-radius:2px; cursor:pointer}
.mini:hover{color:var(--text); border-color:var(--gold)}
.mini:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

.lab-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:var(--line)}
@media(max-width:880px){.lab-body{grid-template-columns:1fr}}
.pane{background:var(--ground); padding:18px 20px 22px; min-width:0}
.pane>header{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.pane h3{font-size:17px; font-weight:600}
/* Which deck is on the table, beside whose pane it is. */
.dname{font-family:var(--f-mono); font-size:11px; color:var(--faint)}
/* input[type=search] is a flex item everywhere else on the site; here it is
   not in a flex row, so its flex-basis did nothing and it sat at whatever
   width the browser gives a text input. */
#bench-q{width:100%}
select{font:inherit; font-size:14px; padding:7px 10px; background:var(--raise); color:var(--text);
  border:1px solid var(--line); border-radius:2px; max-width:100%}
select:focus-visible{outline:2px solid var(--gold); outline-offset:-1px}
.totwrap{margin-left:auto; text-align:right; display:flex; flex-direction:column;
  align-items:flex-end; gap:1px; max-width:100%}
.tot{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:18px; font-weight:600}
/* The unit spelled out.  "+14.9 pts" is a number you have to be told how to
   read; "about 65% of games" is the sentence it turns into. */
.totwrap em{font-style:normal; font-size:11.5px; color:var(--faint); line-height:1.3;
  text-wrap:balance}

/* the ledger row: one card, its copies, its worth */
/* Indented so the change marker down the left edge has somewhere to sit
   without crowding the count.  Every row carries the indent, marked or not,
   so the list does not shift as you edit it. */
/* The same line box a table row has, so a list of cards and a table of cards
   are the same height per line. */
.row{display:flex; align-items:center; gap:0; padding:0 0 0 11px;
  min-height:32px; border-bottom:1px solid var(--hair); line-height:22px;
  font-size:14px; width:100%; background:none; border-left:0; border-right:0; border-top:0;
  color:inherit; font-family:inherit; text-align:left; cursor:pointer}
/* The same two sizes a table row uses.  The lab's name was 14px against the
   tables' 13.5, which is what made an identical 13px number look smaller in
   the lab than in the field. */
.row{font-size:var(--fs-name)}
.row:hover{background:var(--gold-wash)}
.row .n{font-family:var(--f-mono); font-size:12px; color:var(--faint);
  width:15px; margin-right:10px; flex:none}
.row .n.have{width:22px; color:var(--gold); font-size:11px}
.row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* A cell, not a chip.  A table's wash is a band the full height of its row and
   the full width of its column, and the next column's band starts where it
   stops; two washes floating in the middle of a line with air all round them
   read as a different kind of mark for the same kind of number.  So the row
   drops its padding and its gap, and each value carries its own - which is
   exactly what a td does. */
.row .v{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-val); font-weight:500; width:58px; padding:0 8px;
  text-align:right; flex:none;
  align-self:stretch; display:flex; align-items:center; justify-content:flex-end;
  border-left:1px solid color-mix(in oklab, var(--hair) 60%, transparent)}
/* The wall the tables put between the column that says which row this is and
   the columns that are figures.  Without it the wash had no edge to reach and
   its own left edge was the only boundary there was. */
/* Not :first-of-type - every child of a row is a span, so that matched the
   count.  The wall goes on whichever value cell follows the name. */
.row .nm + .v, .rowhead .nm + .v,
.tg h5 i:first-of-type{border-left:1px solid var(--line)}
.tg h5 i + i, .rowhead .v + .v{border-left:1px solid color-mix(in oklab, var(--hair) 60%, transparent)}
.row .acts{display:flex; gap:2px; padding-left:10px; flex:none;
  border-left:1px solid color-mix(in oklab, var(--hair) 60%, transparent)}
.row .act{font-family:var(--f-mono); font-size:15px; line-height:1;
  color:var(--faint); width:22px; height:22px; flex:none; text-align:center; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:3px; padding:0}
.row .act:hover:not(:disabled){color:var(--gold); border-color:var(--line); background:var(--panel)}
.row .act:disabled{opacity:.25; cursor:default}
.row .act.off{font-size:13px}
.row:hover .act.off{color:var(--dim)}
.benchhid{margin-top:10px; font-family:var(--f-mono); font-size:11px; color:var(--faint);
  display:flex; align-items:center; gap:10px}
.row .act:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
/* The ledger's numbers had no headings, so which column was which was
   something you had to work out from the tooltips.  A strip above the list
   names them, built to the same widths the rows use so each label sits over
   its own column. */
.rowhead{display:flex; align-items:baseline; gap:0; padding:14px 0 4px 11px;
  border-bottom:1px solid var(--line); font-family:var(--f-mono);
  font-size:10.5px; font-weight:500;
  color:var(--faint)}
.rowhead .n{width:22px; margin-right:10px; flex:none}
.rowhead .nm{flex:1; min-width:0}
.rowhead .v{width:58px; padding:0 8px; text-align:right; flex:none}
.rowhead .acts{width:56px; flex:none; padding-left:10px;
  border-left:1px solid color-mix(in oklab, var(--hair) 60%, transparent)}
.empty{color:var(--faint); font-size:13px; padding:12px 0}

/* ---------- controls ---------- */
.bar{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; padding-bottom:14px;
  border-bottom:1px solid var(--line)}
input[type=search]{flex:1 1 200px; min-width:140px; padding:9px 12px; font:inherit; font-size:14px;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:3px}
input[type=search]:focus-visible{outline:2px solid var(--gold); outline-offset:-1px; border-color:var(--gold)}
.slider{display:flex; align-items:center; gap:9px; color:var(--dim); font-size:12.5px}
.slider input{width:104px; accent-color:var(--gold-bar)}
.count{margin-left:auto; color:var(--faint); font-size:12.5px}

/* ---------- events ---------- */
/* The tournament list is the cards and pilots table with different columns, so
   it is that table: same header, same rank column, same row hover. */
td.name a.evname{color:inherit; text-decoration:none}
tr.clickable:hover td.name a.evname{color:var(--gold)}
td.src{color:var(--dim); font-size:13.5px}
td.when{font-family:var(--f-mono); font-size:12.5px; color:var(--faint)}
th.c-date, td.when{width:118px}
th.c-src{width:124px}
th.c-players{width:96px} th.c-matches{width:104px}
.evbar{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 9px}
.evbar .note{font-size:12.5px; color:var(--faint); margin:0}
.evbar a{color:var(--dim)}
.evbar a:hover{color:var(--gold)}

/* ---------- a card's and a pilot's own row ---------- */
.span2{grid-column:1/-1}
.sparkwrap{position:relative; max-width:620px; touch-action:pan-y}
.spark{display:block; width:100%; height:auto; margin-bottom:4px}
/* The heading sits right on top of its own chart. */
.det h4 + .sparkwrap, .det1 h4 + .sparkwrap{margin-top:-5px}
.sparkwrap .tip{position:absolute; pointer-events:none; background:var(--panel);
  border:1px solid var(--line); border-radius:3px; padding:3px 8px; font-size:11.5px;
  color:var(--dim); white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.14)}
.sparkwrap .tip b{color:var(--text); font-weight:600; margin-right:6px}


/* Two columns instead of three: a name and a number, no game count to carry.
   The rows are display:contents, so the track list belongs to the container. */
.mu.mu2{grid-template-columns:minmax(0,1fr) 62px 58px; max-width:400px}
.pevs{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:3px}
.pev-pager{margin-top:10px}
.det .note.pevnote{margin:18px 0 0}
h4 .qty{font-family:var(--f-mono); font-size:11.5px; font-weight:400;
  color:var(--faint); margin-left:8px}
/* The padding is on the cells, not on the row, for the reason it is everywhere
   else: the rating move is a washed cell and a wash inside a row's padding is
   a chip floating in the middle of it. */
.pev{background:var(--panel); padding:0 0 0 11px; display:grid; gap:0; align-items:stretch;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 104px 80px 66px 66px 66px;
  font-size:12.5px}
.pev>*{padding:7px 10px 7px 0}
/* A date, a finish and a record are single tokens - none of them has a place
   to break.  The tracks above are sized for the fallback face as well as for
   Inter, because a column that fits only once the webfont lands wraps on the
   first paint and on any machine that does not get it. */
.pev>span{padding:7px 10px; white-space:nowrap}
.pev>span:last-child{padding-right:11px}
/* the rating move, which is the one number here with a sign */
.pev>span.val{font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:flex-end}
.pev>span.val.pos{color:color-mix(in oklab, var(--gold) calc(var(--k, 1) * 100%), var(--dim))}
.pev>span.val.neg{color:color-mix(in oklab, var(--azure) calc(var(--k, 1) * 100%), var(--dim))}
.pev>span{font-size:11.5px; color:var(--faint); text-align:right}
.pev>a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pev .dk{font-size:12.5px; color:var(--dim)}
.pev .dk:hover{color:var(--gold)}
.pevhead>span:nth-child(2){text-align:left}
.pevhead>span, .pevhead>span:first-child{font-size:10.5px; color:var(--faint)}
.pevhead>span:first-child{text-align:left}
@media(max-width:700px){
  /* Name over deck on the left, the three records stacked on the right. */
  /* Stacked here: each value is its own grid row, so per-cell vertical padding
     is paid six times over and the row triples.  The padding goes back on the
     row, and the wash is a chip on its own line because that is what the line
     is. */
  .pev{grid-template-columns:minmax(0,1fr) 92px; gap:2px 0; padding:7px 11px}
  .pev>*, .pev>span{padding-top:0; padding-bottom:0; padding-right:0}
  .pev>span.val{grid-column:2}
  .pev>a:first-child{grid-column:1/3}
  .pev .dk{grid-column:1; grid-row:2}
  .pev>span{grid-column:2}
  .pevhead .dk, .pevhead>span:nth-child(2){display:none}
}

/* ---------- one tournament ---------- */
.dklink{text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:3px}
tr.clickable:hover .dklink{color:var(--gold); text-decoration-color:var(--gold)}
.reg h4{font-size:12px; font-weight:500;
  color:var(--faint); margin:0 0 9px; display:flex; gap:9px; align-items:baseline}
.reg h4 .qty{color:var(--dim); letter-spacing:0}
.reg h4:not(:first-child){margin-top:20px}
.reg .note{margin-top:16px; font-size:12.5px; color:var(--faint)}
.reg .note.warn{margin:0 0 16px; color:var(--text); border-left:3px solid var(--gold);
  padding:2px 0 2px 11px; max-width:60ch}
.crumb{display:inline-block; margin-bottom:16px}
.tourhead{display:flex; align-items:flex-end; gap:14px 24px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:22px}
.tourhead h2{font-size:clamp(24px,3.4vw,34px); font-weight:600; letter-spacing:-.015em;
  flex:1 1 320px; min-width:0}
.tourhead .when{font-family:var(--f-mono); font-size:13px; color:var(--dim);
  padding-bottom:5px}
.loading{color:var(--faint); font-size:13.5px; padding:22px 0}
td.rec{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-val); width:72px; white-space:nowrap; text-align:right}
#sec-standings .tools{margin:14px 0 4px; display:flex}
#fld-pager, #std-pager{margin-top:12px}

/* ---------- one player's rounds, and one match ---------- */
.rounds{margin-top:2px}
.rounds td{padding:7px 12px; border-bottom:1px solid var(--hair)}
.rounds td:first-child{padding-left:0}
/* Not the washed one: a cell whose color stops at the last digit reads as a
   mistake, which is the same thing that was wrong in the match view. */
.rounds td:last-child:not(.val){padding-right:0}
.rounds td.rnd{font-family:var(--f-mono); font-size:11.5px;
  color:var(--faint); white-space:nowrap; width:110px}
.rounds td.go{font-size:11.5px; color:var(--faint); text-align:right;
  white-space:nowrap; width:1%}
/* The cell's own padding is what keeps the wash off the digits; a fixed width
   here pushed the column off a phone. */
.rounds td.go.val{font-size:var(--fs-val)}
/* The margin the model gave the pairing, doubling as the way into it: a number
   worth reading down the column, with the arrow saying it opens.  The color
   and the wash are on the cell, not on the link, so it is the same mark as
   every other rating on the site and the arrow keeps its own gray. */
.mvgo{display:inline-flex; align-items:baseline; gap:7px;
  font-family:inherit; font-variant-numeric:tabular-nums;
  font-size:inherit; font-weight:inherit; color:inherit; text-decoration:none}
.mvgo i{font-style:normal; color:var(--faint); font-weight:400}
.mvgo:hover i{color:var(--gold)}
/* td.name is max-width:0 everywhere else so a long card name truncates; here
   the two name columns are the content and everything else should give way. */
.rounds td.name{max-width:none; width:auto; font-size:var(--fs-name)}
.rounds td.rec{width:72px; white-space:nowrap}
/* Not a score, so it does not get a score's color. */
.rounds td.rec.drawn{color:var(--faint); font-size:11.5px;}
.mvnote.warnnote{color:var(--text); border-left:3px solid var(--gold);
  padding:2px 0 2px 11px; margin-bottom:16px}
.rounds{min-width:0}
tr.mrow{cursor:pointer}
tr.mrow:hover td{background:var(--gold-wash)}
tr.mrow:hover td.go{color:var(--gold)}
tr.mrow:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.mvhead{display:flex; align-items:baseline; gap:12px 20px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px}
.mvhead h3{font-family:var(--f-name); font-size:clamp(19px,2.4vw,25px);
  font-weight:600; flex:1 1 300px; min-width:0}
.mvhead h3 em{font-style:normal; font-family:var(--f-mono);
  font-size:.8em; color:var(--gold); padding:0 6px}
.mvnote{font-size:12.5px; color:var(--faint); max-width:74ch; line-height:1.55;
  margin:0 0 18px}
.mvsum{background:var(--panel); padding:14px 18px 4px; margin-bottom:22px}
.mvsum table{width:auto; min-width:min(420px,100%)}
.mvsum th{font-size:var(--lab-fs); text-align:right}
.mvsum th:first-child{text-align:left}
/* The labels are set in the sans and the numbers in the mono, and the two
   fonts put their baseline in a different place inside the same line box - so
   centring each cell on its own left the figures riding above the words.
   Aligning on the baseline is what makes one row read as one row. */
.mvsum td{padding:8px 8px 8px 26px; font-size:var(--fs-name); height:auto;
  vertical-align:baseline}
.mvsum td:first-child{padding-left:0; color:var(--dim)}
.mvsum tfoot td{border-top:1px solid var(--line); padding-top:8px; font-weight:600}
.mvsum td.none{color:var(--faint)}
.mvsum .note{margin:12px 0 14px; font-size:12px; color:var(--faint); max-width:60ch}
.mvbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.mvbar .crumb{margin-bottom:0}
.mvsec{font-family:var(--f-name); font-size:19px; font-weight:600;
  margin:34px 0 6px; padding-top:18px; border-top:1px solid var(--line)}
/* The block heading inside the table: the same mono eyebrow the decklists use,
   with the block's card count where the copies column is. */
.mvtab tr.tgh td{font-family:var(--f-mono); font-size:10.5px; font-weight:500; color:var(--faint);
  padding:14px 8px 4px; border-bottom:1px solid var(--hair); height:auto}
.mvtab tbody:first-of-type tr.tgh td{padding-top:8px}
.mvtab tr.tgh td em{font-style:normal; color:var(--dim); margin-left:9px;
  letter-spacing:0}
.mvcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:26px}
.mvcol h4{font-family:var(--f-name); font-size:15px; font-weight:600;
  margin:0 0 10px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.mvcol h4 .qty{color:var(--dim); font-family:inherit; font-size:12.5px; font-weight:400}
.mvtab{min-width:0}
/* max-width:0 alone caps the column at its minimum; pairing it with a 100%
   width is what makes the name take the slack and ellipsise only at the end. */
.mvtab td.name, .mvtab th.nm{width:100%; max-width:0}
.mvtab td.name{font-size:var(--fs-name)}
/* Right padding as well as left: the rating is a filled box now, and a box
   that stops at the last digit reads as a mistake. */
.mvtab td, .mvtab th{padding:4px 8px 4px 10px; font-size:var(--fs-val)}
.mvtab td.qty, .mvtab th.qty{padding-left:0; width:22px}
.mvtab td.qty{font-family:var(--f-mono); color:var(--faint); font-size:12px}
.mvtab th{font-size:var(--lab-fs)}
.mvtab th.s{cursor:pointer; user-select:none}
.mvtab th.s:hover{color:var(--text)}
/* .mvtab th.val below is right-aligned and comes later, so the name
   column needs the extra class to keep its header over its own text. */
.mvtab th.nm.nm{text-align:left}
.mvtab tfoot td{border-top:1px solid var(--line); font-weight:600; padding-top:6px}
.mvtab tfoot td.qty{color:var(--dim)}
.mvtab tr.unrated td{color:var(--faint)}
.mvtab tr.unrated td.val{font-family:inherit; font-size:11.5px; text-align:right}
.mvtab td.val, .mvtab th.val{font-family:var(--f-mono);
  font-variant-numeric:tabular-nums; text-align:right; width:50px}
.mvtab th.val{font-family:inherit}
.mvtab td.val.strong{font-weight:600}

/* ---------- what decides a game ---------- */
#bench-pager, #ev-pager{margin-top:12px}
#bench-count{display:block; margin-top:6px; font-size:11.5px; color:var(--faint)}
.spread{margin-top:12px; display:grid; gap:6px}
.sprow{display:grid; grid-template-columns:82px minmax(0,1fr) 54px; align-items:center; gap:10px}
.sprow span{font-size:12.5px; color:var(--dim)}
.sprow .track{height:7px; background:var(--sunk); border-radius:2px; overflow:hidden; position:relative}
.sprow i{font-style:normal; font-size:12px; color:var(--faint); text-align:right}
.srcline{margin:16px 0 0; font-size:12px; color:var(--faint)}
.srcline a{color:var(--dim)}
.srcline a:hover{color:var(--gold)}

/* ---------- method ---------- */
.method{margin-top:4px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(256px,1fr)); gap:26px 34px}
.method h3{font-size:15px; font-weight:600; margin-bottom:7px}
.method p{margin:0; color:var(--dim); font-size:13.5px; line-height:1.62}
.method p + p{margin-top:18px}
.method code{font-family:var(--f-mono); font-size:12.5px; background:var(--sunk);
  padding:1px 5px; border-radius:2px; color:var(--text)}
/* ---------- field weights ---------- */
/* Thirty decks one per line is a column of whitespace with a slider stranded
   at the far edge.  Laid out as its own grid the rows pack two or three across
   and the label sits next to the control it labels. */
.weights{margin-top:12px; border-top:1px solid var(--hair); padding-top:10px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:2px 30px}
.whead{grid-column:1/-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:7px}
.whead .eyebrow{flex:1 1 auto}
.wrow{display:grid; grid-template-columns:minmax(0,1fr) 116px 46px; gap:10px;
  align-items:center; padding:2px 0; font-size:13px}
.wrow .wn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wrow .wv{font:inherit; font-family:var(--f-mono); font-weight:600;
  text-align:right; font-size:12px; color:var(--dim); background:none; border:0;
  padding:0; cursor:pointer}
.wrow input[type=range]{width:100%; accent-color:var(--gold)}
/* A share you set yourself, called out in the accent the rest of the page uses
   for "this is yours": it holds while the others move around it. */
.wrow.pin input[type=range]{accent-color:var(--azure)}
.wrow.pin .wv{color:var(--azure)}
.wrow.pin .wv::after{content:"\2022"; margin-left:4px}
.wheld{font-family:var(--f-mono); font-size:11px; color:var(--azure)}
@media(max-width:700px){
  .wrow{grid-template-columns:minmax(0,1fr) 44px; gap:4px 10px}
  .wrow .wn{grid-column:1} .wrow .wv{grid-column:2}
  .wrow input[type=range]{grid-column:1/-1}
}

/* ---------- the lab's deck pane ---------- */
.pickrow{display:flex; gap:8px; align-items:center}
.pickrow select{flex:1; min-width:0}
/* ---------- what you changed ---------- */
#deck-diff, #deck-missing{margin-top:16px}
#deck-missing p{margin:0 0 6px; font-size:11.5px; color:var(--faint); max-width:48ch}
#deck-diff h5, #deck-missing h5{font-family:var(--f-mono); font-size:10.5px; font-weight:500; color:var(--faint); margin:0 0 5px;
  display:flex; gap:8px; align-items:baseline; border-top:1px solid var(--hair); padding-top:9px}
#deck-diff h5 em, #deck-missing h5 em{font-style:normal; color:var(--dim)}
.chg{display:grid; grid-template-columns:26px minmax(0,1fr) 62px 22px; gap:9px;
  align-items:baseline; font-size:13px; padding:2px 0}
.chg .act{align-self:center}
.chg .d{font-family:var(--f-mono); font-size:12px; text-align:right}
.chg em{font-style:normal; font-family:var(--f-mono); font-size:11.5px;
  color:var(--faint); text-align:right}
.diff{margin:9px 0 0; font-family:var(--f-mono); font-size:11px; color:var(--faint); min-height:1em}
.deckfoot{display:flex; align-items:baseline; gap:10px; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--line)}
.deckcount{font-size:15px; font-weight:600}
.deckcount.ok{color:var(--gold)}
.deckcount.off{color:var(--azure)}
#bench-filters{margin:10px 0 0; gap:6px 14px}
#deck-rows .tg h5, #bench-rows .tg h5{margin-top:9px}
/* what you changed, in the same gold/azure the rest of the page uses for
   yours/theirs: gold is something you added, azure something you took out */
.row.added{box-shadow:inset 3px 0 0 var(--gold)}
.row.changed{box-shadow:inset 3px 0 0 var(--gold-bar)}

/* ---------- paging ---------- */
.pager{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:14px}
.pbtn{font-family:var(--f-mono); font-size:12.5px; font-variant-numeric:tabular-nums;
  min-width:32px; height:30px; padding:0 8px; cursor:pointer; color:var(--dim);
  border:1px solid var(--line); border-radius:3px; background:var(--panel)}
.pbtn:hover:not(:disabled){color:var(--text); border-color:var(--faint)}
.pbtn.on{background:var(--gold-wash); border-color:var(--gold); color:var(--text); font-weight:600}
.pbtn:disabled{opacity:.35; cursor:default}
.pbtn:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.pgap{color:var(--faint); padding:0 2px}

/* ---------- filter chips ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px 26px; margin:14px 0 16px; align-items:center}
.fgroup{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.fgroup .eyebrow{margin-right:2px}
.cbtn,.tbtn{font:inherit; font-size:12.5px; cursor:pointer; padding:4px 10px;
  border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--dim);
  display:inline-flex; align-items:center; gap:6px; line-height:1.4}
.cbtn:hover,.tbtn:hover{color:var(--text); border-color:var(--faint)}
/* Gold keeps, azure throws out - the same pairing the rest of the page uses
   for yours/theirs and positive/negative. */
.cbtn[data-s="in"],.tbtn[data-s="in"]{
  background:var(--gold-wash); border-color:var(--gold); color:var(--text); font-weight:500}
.cbtn[data-s="out"],.tbtn[data-s="out"]{
  background:var(--azure-wash); border-color:var(--azure); color:var(--dim); font-weight:500}
.cbtn[data-s="out"]>*,.tbtn[data-s="out"]{text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:var(--azure)}
.cbtn[data-s="out"]{text-decoration:line-through; text-decoration-thickness:1px}
.cbtn[data-s="out"] .pip{opacity:.45}
.cbtn:focus-visible,.tbtn:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
@media(max-width:700px){.filters{gap:8px 14px} .cbtn,.tbtn{font-size:13px; padding:5px 11px}}

/* ---------- decklist, written in blocks ---------- */
.cardlist{columns:215px 2; column-gap:22px}
.tg{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 11px}
#deck-rows .tg h5, #bench-rows .tg h5{padding-left:11px}
.tg h5{font-family:var(--f-mono); font-size:10.5px; font-weight:500; color:var(--faint); margin:0;
  display:flex; gap:8px; align-items:stretch; border-bottom:1px solid var(--hair); padding-bottom:3px}
.tg h5 em{font-style:normal; color:var(--dim)}
/* Built to the row's own widths, so each name lands over its column: the two
   value cells are its 58px, the spacer is its buttons and their margin. */
.tg h5 i{font-style:normal; width:58px; padding:0 8px; text-align:right; flex:none;}
.tg h5 i:first-of-type{margin-left:auto}
.tg h5 b{font-weight:inherit; width:56px; flex:none; padding-left:10px;
  border-left:1px solid color-mix(in oklab, var(--hair) 60%, transparent)}
.tg h5 i.s{cursor:pointer; user-select:none}
.tg h5 i.s:hover, .tg h5 i.s:focus-visible{color:var(--gold); outline:none}
.tg h5 i.s.on{color:var(--gold)}
.tg h5 i.s.on::after{content:"\2193"; margin-left:4px; font-size:9px}
.tg h5 i.s.on[aria-sort="ascending"]::after{content:"\2191"}
/* The heading's own gap went with the row's, so the block name and its count
   need the space back on the count itself. */
#deck-rows .tg h5, #bench-rows .tg h5{gap:0}
/* The block heads and the candidates' strip are a thead by another name. */
#deck-rows .tg h5, #bench-rows .tg h5, .rowhead{font-size:var(--lab-fs)}
#deck-rows .tg h5 em, #bench-rows .tg h5 em{margin-left:8px}
/* An archetype's typical list is the same two columns at .cl's widths, and it
   has no buttons on the end, so no spacer either. */
.cardlist .tg h5{gap:8px}
.cardlist .tg h5 i{width:44px;}
.cardlist .tg h5 i+i{width:40px}

/* ---------- card art ---------- */
.cn{cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:var(--hair); text-underline-offset:3px}
.cn:hover{text-decoration-color:var(--gold)}
/* No picture to open, so it is not offered as something to open. */
.cn.noart, .cn.noart:hover{cursor:default; text-decoration:none}
#peek{position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .09s;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.4))}
/* The mobile rule below sets display:grid, which outranks the hidden
   attribute's display:none - leaving a full-viewport overlay swallowing every
   tap on the page.  Attribute plus id beats the bare id, in any order. */
#peek[hidden]{display:none}
#peek.on{opacity:1}
#peek img{display:block; width:244px; border-radius:11px; background:var(--sunk)}
@media(max-width:700px){
  .cardlist{columns:1}
  /* no hover on a touch screen, so the preview is a tap and it centers */
  #peek{inset:0; display:grid; place-items:center; pointer-events:auto;
    background:rgba(0,0,0,.55); backdrop-filter:blur(2px)}
  #peek img{width:min(74vw,320px)}
}

/* ---------- narrow screens ----------
   The desktop tables are built out of fixed-width numeric columns with the
   name column absorbing whatever is left (max-width:0 is what makes its
   ellipsis work).  On a phone there is nothing left to absorb, so every name
   collapsed to about twelve characters of ellipsis.  Below 700px the spine and
   the least useful counts come out, names wrap instead of truncating, and the
   row grows to fit rather than being pinned to 38px. */
@media(max-width:700px){
  .wrap{padding:0 15px 72px}
  .mast-in{padding:20px 15px 18px; gap:14px 20px}
  .brand p{font-size:15px}
  .stamp{gap:18px}
  .sec{gap:10px 16px}
  .sec p{font-size:14.5px}
  /* Under 16px iOS zooms the page when you tap into a field. */
  input[type=search]{font-size:16px}
  /* The summary's generous left gutter is desktop's to spend; at phone type
     sizes it is what pushes the Net column off the screen. */
  .mvsum{padding:12px 12px 4px}
  .mvsum td{padding-left:12px}
  /* width:auto lets a long player name push the Net column off the screen
     rather than wrap; on a phone the four columns share what there is. */
  .mvsum table{width:100%; min-width:0; table-layout:fixed}
  .mvsum th{white-space:normal}

  /* One type scale for the phone, set on the tokens.  Putting the sizes on
     td.name and td.val meant the tables grew here and the deck lab, which is
     the same rows in a different element, stayed at the desktop sizes. */
  :root{--fs-name:16px; --fs-num:15px; --fs-val:15px; --lab-fs:11px}

  table{min-width:0}
  thead th{padding:10px 8px 8px;}
  td{padding:9px 8px; height:auto}
  td.name{max-width:none; white-space:normal; overflow:visible;
          text-overflow:clip; line-height:1.3; hyphens:none}
  /* Long card-name words must stay inside the match table's name column. */
  .mvtab td.name{overflow-wrap:anywhere}
  td.num{width:auto; min-width:52px}
  td.val{width:auto; min-width:56px}
  /* Room for the rule that marks an open row: at padding-left:0 the finishing
     place sat on top of it. */
  td.rank{width:30px; padding-left:7px}
  /* the bars are decoration, and the number each encodes sits beside it */
  td.spine, th.c-spine, td.share, th.c-sharebar{display:none}
  /* on the field table the raw game count is the first thing worth losing */
  td.c-games, th.c-games{display:none}
  /* the game differential is the two numbers next to it, subtracted */
  td.c-diff, th.c-diff{display:none}

  .cardlist{grid-template-columns:1fr}
  .cl span, .mu>div>span, .mu .jump, .row .nm{white-space:normal; overflow:visible;
    text-overflow:clip; line-height:1.3}
  .det{padding:16px 14px 20px; gap:20px}
  /* A name wraps here, so the row grows and needs air - but the air goes on
     the cells, not on the row.  A td's background covers its own padding, so
     a table's wash still fills its row on a phone; with the padding on the
     row instead, the lab's wash was inset top and bottom and the two stopped
     looking like the same thing. */
  .row{align-items:stretch}
  .row .n, .row .nm{padding:7px 0}
  .row .v{padding-top:7px; padding-bottom:7px; align-items:flex-start}
  .row .acts{padding-top:5px; align-items:flex-start}
  /* the source and the raw match count are the first things a phone loses */
  td.src, th.c-src, td.c-matches, th.c-matches{display:none}
  /* Five columns of a rounds list will not fit a phone whatever we do, but it
     should not need more scrolling than it did before its two numbers became
     cells. */
  .rounds td{padding:7px 8px}
}
@media(max-width:420px){
  :root{--fs-name:15px}
  .brand h1{font-size:28px}
}
/* ---------- the shape of a table -------------------------------------------
   Ruled and boxed and close-set, with a hairline walling the columns that say
   which row this is off from the columns that are numbers.  What the stats
   sites that get read for years all converge on, without any of their
   livery. */
thead th{background:var(--panel); color:var(--text);
  padding:5px 8px; border-bottom:1.5px solid var(--text);
  border-right:1px solid color-mix(in oklab, var(--line) 45%, transparent)}
thead th:last-child{border-right:0}
tbody td{border-right:1px solid color-mix(in oklab, var(--hair) 60%, transparent)}
tbody td:last-child{border-right:0}
tr.detail>td{border-right:0}
/* The rounds list is a list, not a data table: the column rules that wall a
   table's names off from its figures only crowd it, and with no left padding
   to sit behind they landed flush against the pips and the game record. */
.rounds td, .rounds td.name{border-right:0}
td.name, th.c-name{border-right:1px solid var(--line)}
.sec{border-bottom:1.5px solid var(--text)}
.sec h2{font-weight:700; letter-spacing:-.015em}
.brand h1{font-weight:700; letter-spacing:-.025em}

/* ---------- the masthead is a color, not another gray ---------------------*/
.mast{background:var(--mast); border-bottom:3px solid var(--gold-bar)}
.mast .brand h1 a{color:var(--mast-ink)}
.mast .brand h1 .dot{color:var(--gold-bar)}
.mast-in{padding-top:20px; padding-bottom:18px}

/* ---------- what a rating looks like ---------------------------------------
   One ink everywhere: the digits carry the color and the ground behind them
   carries it again where there is a cell to carry it in.  Half the site had
   black digits on a wash and the other half had colored digits on nothing,
   which made the same number look like two kinds of thing.  The ink ramps from
   --dim rather than from --faint so the smallest value in a column is still a
   number you can read, and only its color says it is small. */
.val.pos, .val.neg, .row .v.pos, .row .v.neg{font-weight:500; border-radius:2px}
.val.pos, .row .v.pos{
  color:color-mix(in oklab, var(--gold) calc(var(--k, 1) * 100%), var(--dim));
  background:color-mix(in oklab, var(--gold-bar) calc(var(--k, 1) * 40%), transparent)}
.val.neg, .row .v.neg{
  color:color-mix(in oklab, var(--azure) calc(var(--k, 1) * 100%), var(--dim));
  background:color-mix(in oklab, var(--azure-bar) calc(var(--k, 1) * 40%), transparent)}
/* The arrow sits inside a washed cell, so it keeps its own weight and gray. */
.mvgo i{font-weight:400}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}


/* NFL pages extend the mtgskill table and masthead layout. */
.site-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.site-nav a{font-size:13px;font-weight:600;text-decoration:none;padding:6px 10px;border:1px solid transparent;border-radius:2px;color:var(--dim)}
.site-nav a:hover{color:var(--text);border-color:var(--line)}
.site-nav a[aria-current="page"]{background:var(--azure-wash);border-color:var(--azure);color:var(--text)}
.brand .dot{font-size:15px;color:var(--azure);vertical-align:top;margin-top:3px}
.mast-in{align-items:center}
.mast .stamp{padding-bottom:0}
/* The masthead is dark in every theme, so its secondary text steps down from
   --mast-ink rather than using --dim and --text, which are inks for the page.
   Any step lighter than full --mast-ink falls under 4.5:1 on the gold masthead,
   so the current page is marked by its ground and border, not a brighter ink. */
.mast .brand p,.mast .site-nav a{color:var(--mast-ink)}
.mast .fmt{opacity:1}
.mast .site-nav a:hover{border-color:color-mix(in oklab, var(--mast-ink) 35%, var(--mast))}
.mast .site-nav a[aria-current="page"]{color:var(--mast-ink);background:color-mix(in oklab, var(--mast-ink) 12%, var(--mast));border-color:var(--gold-bar)}
.pagehead{margin:0 0 26px}
.pagehead h2{font-size:var(--fs-h1);font-weight:650;letter-spacing:-.02em}
.pagehead p{color:var(--dim);font-size:13.5px;margin:8px 0 0;max-width:70ch}
.kicker{font-family:var(--f-label);font-size:var(--lab-fs);color:var(--faint);font-weight:600;margin:0 0 5px}
.viewbar{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
.viewbar button{font:inherit;font-size:12.5px;font-weight:600;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:7px 12px;cursor:pointer}
.viewbar button:hover{border-color:var(--azure);color:var(--text)}
.viewbar button[aria-pressed="true"]{background:var(--azure-wash);border-color:var(--azure);color:var(--text)}
.viewbar button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nfl-table{min-width:1080px}
.nfl-table td.name{max-width:260px;width:260px}
.nfl-table td.name a{text-decoration:none}
.nfl-table td.name a:hover{text-decoration:underline}
.nfl-table td.val,.nfl-table th.num{min-width:93px}
.nfl-table td.meta{color:var(--dim);font-size:12px;white-space:nowrap}
.nfl-table td.team{font-weight:600;white-space:nowrap}
.nfl-table td.team a{text-decoration:none}
.nfl-table th[data-sort]{cursor:pointer}
.nfl-table th[data-sort]:hover{color:var(--text)}
.nfl-table th[data-sort]:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.table-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 11px}
.table-tools input{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);background:var(--raise);color:var(--text);border-radius:2px;width:min(100%,300px)}
.table-tools input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.table-tools .count{font-family:var(--f-mono);font-size:12px;color:var(--faint)}
.player-tools{justify-content:flex-start;gap:10px 14px}
.player-tools input[type="search"]{margin-left:auto}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0;color:var(--dim);font-size:12px}
.pager button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:5px 10px;border-radius:2px;cursor:pointer}
.pager button:disabled{opacity:.45;cursor:default}
.pager button:not(:disabled):hover{border-color:var(--gold)}
.footnote{font-size:12px;color:var(--faint);margin:13px 0 0;line-height:1.55;max-width:95ch}
.crumb{display:inline-block;margin:0 0 16px;color:var(--dim);font-size:12.5px}
.loading,.error{font-size:13px;color:var(--faint)}
.error{color:var(--neg,var(--azure))}
@media(max-width:700px){.mast-in{gap:12px}.site-nav{order:3;width:100%}.stamp{margin-left:auto}.wrap{padding:0 14px 72px}.pagehead h2{font-size:25px}}

/* Three shorter tables preserve every value without a 17-column scan. */
.subtable{margin:0 0 25px}
/* Six long tables with pinned columns: skip rendering the ones off screen. */
.subtable{content-visibility:auto;contain-intrinsic-size:auto 1000px}
.subtable h3{font-size:15px;font-weight:600;margin:0 0 7px;color:var(--dim)}
.subtable-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 7px}
.subtable-head h3{margin:0}
.subtable-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.subtable-count{font-size:12px;font-weight:500;color:var(--faint)}
.table-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:25px}
.table-content{min-width:0}
.table-jump{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow-y:auto;padding:4px 12px 4px 0;border-right:1px solid var(--line)}
.jump-group{display:grid;gap:3px;margin:0 0 14px}
.jump-group>span{font-size:11px;font-weight:700;color:var(--dim);letter-spacing:.01em}
.jump-group a{display:block;padding:4px 6px;border-radius:2px;color:var(--dim);font-size:12px;text-decoration:none}
.jump-group a{padding-left:14px}
.jump-group a:hover,.jump-group a:focus-visible{background:var(--panel);color:var(--text)}
.table-content table[id],.table-content section[id]{scroll-margin-top:16px}
@media(max-width:900px){
  .table-layout{display:block}
  .table-jump{position:static;max-height:none;display:flex;gap:12px;overflow-x:auto;padding:0 0 10px;margin:0 0 24px;border-right:0;border-bottom:1px solid var(--line)}
  .jump-group{display:flex;align-items:center;gap:2px;flex:none;margin:0}
  .jump-group a{padding-left:6px}
}
.league-table,.player-table{min-width:0}
.league-table.overall{min-width:1000px}
.league-table.offense,.league-table.defense{min-width:974px}
.player-table.overall{min-width:790px}
.player-table.offense,.player-table.defense{min-width:1170px}
.league-table td.rank,.league-table thead th.rank{min-width:44px;width:44px}
.player-table td.rank,.player-table thead th.rank{min-width:44px;width:44px}
.league-table td.team,.league-table thead th:nth-child(2){min-width:205px;width:205px}
.player-table td.team,.player-table thead th:nth-child(2){min-width:76px;width:76px}
.player-table td.name,.player-table thead th:nth-child(3){min-width:220px;width:220px}
.player-table td.meta:nth-child(4),.player-table thead th:nth-child(4){min-width:50px;width:50px}
.player-table td.draft-year,.player-table thead th:nth-child(5){min-width:66px;width:66px}
.league-table td.val,.player-table td.val{min-width:90px}
.league-table thead th:first-child,.league-table tbody td:first-child,
.player-table thead th:first-child,.player-table tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--ground)}
.league-table thead th:nth-child(2),.league-table tbody td:nth-child(2){position:sticky;left:44px;z-index:1;background:var(--ground)}
.player-table thead th:nth-child(2),.player-table tbody td:nth-child(2){position:sticky;left:44px;z-index:1;background:var(--ground)}
.player-table thead th:nth-child(3),.player-table tbody td:nth-child(3){position:sticky;left:120px;z-index:1;background:var(--ground)}
.player-table thead th:nth-child(4),.player-table tbody td:nth-child(4){--sticky-edge:var(--ground);position:sticky;left:340px;z-index:1;background:var(--sticky-edge);box-shadow:-2px 0 0 var(--sticky-edge),2px 0 0 var(--sticky-edge),inset -1px 0 0 var(--line)}
.league-table thead th:first-child,.league-table thead th:nth-child(2),.player-table thead th:first-child,.player-table thead th:nth-child(2),.player-table thead th:nth-child(3),.player-table thead th:nth-child(4){z-index:2;background:var(--panel)}
.player-table thead th:nth-child(4){--sticky-edge:var(--panel)}
@media(hover:hover) and (pointer:fine){
  .nfl-table tr:hover{background:var(--panel)}
  .league-table tbody tr:hover td:first-child,.league-table tbody tr:hover td:nth-child(2),.player-table tbody tr:hover td:first-child,.player-table tbody tr:hover td:nth-child(2),.player-table tbody tr:hover td:nth-child(3),.player-table tbody tr:hover td:nth-child(4){background-color:var(--panel)}
  .player-table tbody tr:hover td:nth-child(4){--sticky-edge:var(--panel)}
}
.team-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;vertical-align:middle}
/* The player tables' smaller team code sits a pixel above the logo's center.
   A flex margin moves it without making every pinned team cell hold a
   positioned element. */
.player-table td.team .team-logo{margin-bottom:2px}
.team-link:hover span{text-decoration:underline}
.team-logo{width:20px;height:20px;object-fit:contain;flex:none;vertical-align:middle}
.team-logo.large{width:48px;height:48px}
.team-title{display:flex;align-items:center;gap:12px}
.nfl-table td.missing{color:var(--faint)}
.filter-label{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:12px;font-weight:600}
.filter-label select,.rating-filter{font:inherit;font-size:13px;color:var(--text);background:var(--raise);border:1px solid var(--line);border-radius:2px;padding:7px 10px;max-width:240px}
.subtable-controls .rating-filter.concealed{visibility:hidden;pointer-events:none}
.filter-label select:focus-visible,.rating-filter:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.position-picker{position:relative;color:var(--text);font-size:13px}
.position-picker[open]{z-index:10}
.position-picker summary{list-style:none;cursor:pointer;min-width:140px;max-width:200px;padding:7px 26px 7px 10px;border:1px solid var(--line);border-radius:2px;background:var(--raise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.position-picker summary::-webkit-details-marker{display:none}
.position-picker summary::after{content:"▾";position:absolute;right:9px;color:var(--dim)}
.position-picker summary:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.position-menu{position:absolute;top:calc(100% + 4px);left:0;display:grid;gap:2px;min-width:170px;max-height:260px;overflow-y:auto;padding:6px;background:var(--raise);border:1px solid var(--line);box-shadow:var(--shadow)}
.position-menu label{display:grid;grid-template-columns:16px 1fr;align-items:center;gap:8px;padding:5px 6px;white-space:nowrap;cursor:pointer}
.position-menu label:hover{background:var(--panel)}
.position-menu input[type="checkbox"]{box-sizing:border-box;width:14px;height:14px;min-width:0;margin:0;padding:0;border:0;border-radius:0;accent-color:var(--azure)}
.position-menu button{font:inherit;text-align:left;padding:6px;border:0;background:none;color:var(--dim);cursor:pointer}
.position-menu button:hover{background:var(--panel);color:var(--text)}

/* Each league value column sets its own color range in JavaScript. */
.league-table td.val.pos{background:color-mix(in srgb,var(--gold-bar) var(--wash),var(--ground))}
.league-table td.val.neg{background:color-mix(in srgb,var(--azure-bar) var(--wash),var(--ground))}
.league-table.overall tfoot{border-top:2px solid var(--line);background:var(--panel)}
.league-table.overall tfoot th{padding:var(--td-pt) var(--td-px) var(--td-pb);text-align:left;font-size:12px;font-weight:650;white-space:nowrap}
.league-table.overall tfoot td{background:var(--panel)!important}
.nfl-table tbody tr[data-team],.nfl-table tbody tr[data-player]{cursor:pointer}
.nfl-table tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* Only a selected row's cells need to anchor its bars.  Positioning every cell
   makes each one a paint layer to sort against the pinned columns on every
   frame of a sideways scroll.  :where keeps this below the pinned columns'
   position:sticky, which anchors the bars just as well. */
:where(.nfl-table tbody tr[aria-selected="true"]) td{position:relative}
/* Collapsed column borders sit outside cell backgrounds, and a pinned cell
   paints its shared border over its neighbor, so the selected row's bars are
   an overlay reaching 1px over the border on each side. */
.nfl-table tbody tr[aria-selected="true"] td::before{content:"";position:absolute;inset:0 -1px;border-block:2px solid var(--gold-bar);pointer-events:none}
.nfl-table tbody tr[aria-selected="true"] td:first-child::before{left:0}
.nfl-table tbody tr[aria-selected="true"] td:last-child::before{right:0}
.nfl-table tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 2px 0 var(--gold-bar)}
.nfl-table tbody tr[aria-selected="true"] td:last-child{box-shadow:inset -2px 0 var(--gold-bar)}
@media(max-width:700px){
  .league-table thead th:first-child,.league-table thead th:nth-child(2),
  .league-table tbody td:first-child,.league-table tbody td:nth-child(2),
  .player-table thead th:first-child,.player-table thead th:nth-child(2),.player-table thead th:nth-child(3),.player-table thead th:nth-child(4),
  .player-table tbody td:first-child,.player-table tbody td:nth-child(2),.player-table tbody td:nth-child(3),.player-table tbody td:nth-child(4){position:relative;left:auto}
  .player-table thead th:nth-child(4),.player-table tbody td:nth-child(4){box-shadow:none}
}