/* Moneta Admin — same palette and type as monetapoker.com */

@font-face { font-family:'Geist'; src:url('/static/fonts/geist.woff2') format('woff2');
             font-weight:300 700; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/static/fonts/jetbrains.woff2') format('woff2');
             font-weight:400 700; font-display:swap; }
@font-face { font-family:'Michroma'; src:url('/static/fonts/michroma.woff2') format('woff2');
             font-weight:400; font-display:swap; }

:root{
  --bg:#050a06; --bg-raise:#0a140d; --card:#0c160f; --line:#18271c;
  --green:#84b454; --green-bright:#a8d878;
  --gold:#b89a4e; --gold-bright:#d4b86a;
  --text:#f2f7f2; --text-dim:#c6d3c7; --text-mute:#9aab9d;
  --danger:#d96155; --warn:#e0a44a;
  --display:'Michroma',-apple-system,sans-serif;
  --body:'Geist',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:6px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(ellipse at top,rgba(132,180,84,.05) 0,transparent 55%),
    radial-gradient(ellipse at bottom right,rgba(184,154,78,.03) 0,transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); font-family:var(--body); font-size:16px;
  font-weight:300; line-height:1.6; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green-bright);text-decoration:none}
a:hover{color:var(--text)}

/* ---------- chrome ---------- */
.nav{
  border-bottom:1px solid var(--line);
  background:rgba(5,10,6,.88); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(184,154,78,.18);
}
.nav-in{max-width:1400px;margin:0 auto;padding:0 28px;
        display:flex;align-items:center;gap:28px;height:60px}
.brand{font-family:var(--display);font-size:15px;letter-spacing:.5px;
       color:var(--text);display:flex;align-items:center;gap:10px}
.brand img{height:26px;width:auto}
.brand span{color:var(--gold)}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{font-size:15px;color:var(--text-dim);padding:4px 0;
             border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--text)}
.nav-links a.on{color:var(--green-bright);border-bottom-color:var(--green)}
.whoami{font-size:13px;color:var(--text-mute);font-family:var(--mono)}

.wrap{max-width:1400px;margin:0 auto;padding:32px 28px 80px}
h1{font-family:var(--display);font-size:24px;font-weight:400;margin:0 0 4px;
   letter-spacing:.5px}
h2{font-size:17px;font-weight:600;margin:34px 0 14px;color:var(--text-dim);
   text-transform:uppercase;letter-spacing:1.2px}
.sub{color:var(--text-mute);font-size:15px;margin:0 0 28px}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);
      border-radius:var(--r);padding:20px 22px;margin-bottom:18px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.stat{background:var(--card);border:1px solid var(--line);
      border-radius:var(--r);padding:16px 18px}
.stat .k{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;
         color:var(--text-mute);margin-bottom:6px}
.stat .v{font-family:var(--mono);font-size:30px;font-weight:500;
         color:var(--text)}
.stat .v.money{color:var(--green-bright)}
/* A date is ten mono characters wide; at 30px it outgrows the
   narrowest card and wraps mid-year. */
.stat .v.date{font-size:22px}
.stat .n{font-size:13px;color:var(--text-mute);margin-top:4px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:1px;
   color:var(--text-mute);font-weight:600;padding:10px 12px;
   border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 12px;border-bottom:1px solid rgba(24,39,28,.6)}
tr:last-child td{border-bottom:none}
/* Every other row a shade lighter, so the eye can follow a line across
   a wide table. Once, here, for every list in the panel. It is drawn
   on the row, under everything: a cell's own colour (a payout's club
   lines) paints over it, and :where() gives it no specificity, so the
   hover — the same property on the same element — beats it on even rows
   too. The rows that mark themselves some other way (a void's strike, an
   excluded row's fade, an import's outline) keep the stripe under the
   mark, which is what they'd have had had they fallen on a plain row.
   Club lines are stepped over rather than counted: they sit under the
   person they detail and already carry a colour, and counting them would
   put two persons in a row on the same shade. The card is #0c160f; this
   is the text colour at 3%, a lift and not a tint, so the green of a
   hover still reads as a hover. The calc tables aren't lists. */
tbody tr:where(:nth-child(even of :not(.clubline))){
   background:rgba(242,247,242,.03)}
.calc tr{background:none}
tbody tr:hover{background:rgba(132,180,84,.05)}
/* A player taken off a promo, on the eligibility selector. Faded rather
   than hidden: the operator is looking at the club, and a row that
   vanished when it was excluded would leave them wondering where it
   went and no way to put it back. */
tbody tr.excluded td{opacity:.45}
tbody tr.excluded td[data-col="pick"]{opacity:1}
.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.money{font-family:var(--mono);text-align:right;color:var(--green-bright);
       white-space:nowrap}
.pid{font-family:var(--mono);font-size:14px;color:var(--text-dim)}
.dim{color:var(--text-mute)}

/* ---------- bits ---------- */
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;
     border:1px solid var(--line);color:var(--text-mute);
     font-family:var(--mono);letter-spacing:.4px}
.tag.ok{color:var(--green-bright);border-color:rgba(132,180,84,.4)}
.tag.gold{color:var(--gold-bright);border-color:rgba(184,154,78,.4)}
.tag.warn{color:var(--warn);border-color:rgba(224,164,74,.4)}
.tag.off{color:var(--text-mute)}

/* A figure that isn't the ordinary one: a rakeback boost on a payout row.
   Bare, not a tag — it sits in a money column beside plain numbers. */
.gold{color:var(--gold-bright)}

.msg{border-radius:var(--r);padding:16px 18px;margin-bottom:18px;font-size:15px}
.msg.err{background:rgba(217,97,85,.08);border:1px solid rgba(217,97,85,.4);
         color:#f0b4ae}
.msg.ok{background:rgba(132,180,84,.08);border:1px solid rgba(132,180,84,.4);
        color:var(--green-bright)}
.msg.warn{background:rgba(224,164,74,.08);border:1px solid rgba(224,164,74,.4);
          color:#f0cf9a}
.msg b{font-weight:600}
.msg ul{margin:8px 0 0;padding-left:18px}
.msg li{margin:3px 0}

/* ---------- forms ---------- */
label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;
      color:var(--text-mute);margin-bottom:6px}
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=file],select,textarea{
  width:100%;background:#081109;border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);padding:10px 12px;
  font-family:var(--body);font-size:15px}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(132,180,84,.12)}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1;min-width:160px}
.check{display:flex;align-items:center;gap:8px;color:var(--text-dim);
       font-size:15px;text-transform:none;letter-spacing:0}
.check input{width:auto}

button,.btn{
  background:var(--green);color:#06180a;border:1px solid var(--green);border-radius:var(--r);
  padding:11px 22px;font-family:var(--body);font-size:15px;font-weight:600;
  box-sizing:border-box;line-height:1.2;cursor:pointer;transition:background .15s}
button:hover,.btn:hover{background:var(--green-bright);color:#06180a}
button.ghost,.btn.ghost{background:transparent;color:var(--text-dim);
  border:1px solid var(--line)}
button.ghost:hover,.btn.ghost:hover{border-color:var(--green);color:var(--text)}

/* ---------- login ---------- */
.login{max-width:380px;margin:14vh auto;padding:0 24px}
.login .crest{display:block;margin:0 auto 22px;height:76px;width:auto;
              filter:drop-shadow(0 0 16px rgba(132,180,84,.18))}
.login h1{text-align:center;margin-bottom:26px}
.login .card{padding:26px}
.login button{width:100%;margin-top:8px}
.login .f{margin-bottom:16px}

.foot{text-align:center;color:var(--text-mute);font-size:12px;
      padding:30px 0;border-top:1px solid var(--line);margin-top:50px}
.empty{text-align:center;color:var(--text-mute);padding:44px 0;font-size:15px}

/* ---------- period presets ---------- */
.presets{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-block;font-size:15px;padding:9px 18px;border-radius:99px;
  border:1px solid var(--line);color:var(--text-dim);background:#081109;
  transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--green);color:var(--text)}
.chip.on{background:rgba(132,180,84,.12);border-color:var(--green);
         color:var(--green-bright);font-weight:500}

/* ---------- date fields ----------
   Chrome draws the calendar icon as a dark glyph, which is invisible on a
   dark background. Tint it, give it room, and make the whole field a
   click target rather than just the icon. */
input[type=date]{
  position:relative; color-scheme:dark; cursor:pointer;
  padding-right:44px; font-family:var(--mono); font-size:16px;
}
input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; padding:0; margin:0; cursor:pointer;
  /* brightness(0) crushes the glyph to solid black, then invert(1)
     makes it solid white. Deterministic: it lands on white whatever
     colour Chrome chose to draw it, which is why a plain invert()
     doesn't work here -- color-scheme:dark already lightened it, so
     inverting turned it black again. */
  filter:brightness(0) invert(1);
  opacity:1;
}
input[type=date]:hover::-webkit-calendar-picker-indicator{
  filter:brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,.6));
}
input[type=date]::-webkit-datetime-edit{color:var(--text)}
input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}


/* ---------- the rate matters most: make it unmistakable ---------- */
.tag{font-size:13px;padding:3px 10px}
td .tag{font-size:15px;padding:4px 12px;font-weight:600}
.rate{
  font-family:var(--mono);font-size:17px;font-weight:700;
  color:var(--gold-bright);letter-spacing:.5px;white-space:nowrap}
.rate.override{color:var(--gold-bright)}
.rate.formula{color:var(--text-dim)}
.money{font-size:15px}
td.money{font-size:16px;font-weight:500}
tfoot td{font-size:17px;padding:16px 12px}

/* ---------- net and hold ----------
   Net W/L reads from the player's chair: green and positive is a player up,
   red and negative is a player down. .neg is the red half — a minus sign on
   its own is missed at a glance, so the colour carries it as well. */
.neg{font-family:var(--mono);text-align:right;white-space:nowrap;
     color:var(--danger)}
.stat .v.neg{color:var(--danger)}
.stat .v.dim{color:var(--text-mute)}
td.hold,tfoot td.hold{color:var(--gold-bright);font-weight:500}
/* Rake bigger than the deposits it is a share of. Arithmetically fine, but
   it means the money in play arrived before this window opened, so the drop
   understates it and the figure is marked rather than read as a real hold. */
.hold.over,.stat .v.over{color:var(--warn)}
td.hold.over{cursor:help;border-bottom:1px dotted rgba(224,164,74,.5)}

/* Sortable column headers. They inherit the th's small caps; the arrow
   marks which one is actually in force, and which way round it is. */
th a.sortcol{color:inherit;display:inline-block}
th a.sortcol:hover{color:var(--text)}
th a.sortcol.on{color:var(--green-bright)}
th a.sortcol.on::after{font-size:9px;vertical-align:1px}
th a.sortcol.on.desc::after{content:' \25BC'}
th a.sortcol.on.asc::after{content:' \25B2'}

/* The columns menu: a native <details>, so it opens with no script and
   sits over the table rather than pushing it down the page. */
.colbar{display:flex;justify-content:flex-end;margin-bottom:10px}
.colmenu{position:relative}
.colmenu>summary{
  display:inline-block;cursor:pointer;list-style:none;
  font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-mute);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 14px;background:#081109}
.colmenu>summary::-webkit-details-marker{display:none}
.colmenu>summary::after{content:' \25BE'}
.colmenu>summary:hover{border-color:var(--green);color:var(--text)}
.colmenu[open]>summary{border-color:var(--green);color:var(--text)}
.colmenu-body{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:200px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.colmenu-body .check{padding:4px 0;cursor:pointer}

/* An overridden rate is marked, not announced. The badge that used to sit
   here was as wide as the number it was annotating. */
.ovr{font-family:var(--mono);font-size:10px;font-weight:400;
     letter-spacing:.6px;color:var(--text-mute);vertical-align:2px;
     margin-left:5px}

/* ---------- the ladder ----------
   Six rungs, and the point of the badge is that you can tell them apart
   without reading the word. Each one borrows the colour of the stone, and
   the ordering runs light-and-cool at the top to muted at the bottom, so a
   roster sorted by tier also reads as a gradient. */
.tier{
  display:inline-block;font-family:var(--mono);font-size:13px;
  font-weight:600;letter-spacing:.4px;padding:2px 9px;border-radius:99px;
  border:1px solid currentColor;white-space:nowrap}
.tier.onyx    {color:#e8e2f0}
.tier.diamond {color:#8fc7d8}
.tier.ruby    {color:#d97a80}
.tier.platinum{color:var(--text-dim)}
.tier.gold    {color:var(--gold-bright)}
.tier.silver  {color:var(--text-mute)}
.stat .n .tier{font-size:12px}
.nowrap{white-space:nowrap}

/* The rate worked out in the open, on the player screen. Three knobs
   interacting is not something anyone should have to redo in their head,
   so it is laid out as the sum it is: inputs, a rule, the answer. */
.calc{width:100%;border-collapse:collapse;font-size:15px}
.calc td{padding:6px 0;border:none;vertical-align:baseline}
.calc td:first-child{color:var(--text-mute);width:130px}
.calc td.num{font-family:var(--mono);text-align:right;width:120px;
             padding-right:16px;color:var(--text)}
.calc td:last-child{font-size:13px}
.calc tr.total td{border-top:1px solid var(--line);padding-top:12px}
.calc tr.total td:first-child{color:var(--text)}

/* ---------- the message archive ----------
   A long table that pages, thumbnails small enough that a row stays a
   row, and message text that keeps the line breaks the player typed. */
.pager{display:flex;align-items:center;justify-content:space-between;
       gap:14px;flex-wrap:wrap;padding:14px 2px;font-size:14px}
.pager-links{display:flex;align-items:center;gap:12px}
.pager .chip{padding:6px 14px;font-size:14px}
.thumb{max-width:88px;max-height:64px;border-radius:6px;display:block;
       border:1px solid var(--line)}
.shot{max-width:100%;border-radius:var(--r);border:1px solid var(--line)}
.msgtext{white-space:pre-wrap;word-break:break-word;margin:0;font-size:15px}
/* The one cell on these tables that holds prose. Everything else is a
   date or a name and stays on its line; a message is as long as it is,
   and a link pasted into one has no spaces to break at. */
td.msgcell{max-width:520px;word-break:break-word}
/* Table cells linking to the message they hold: the whole cell is the
   target, but it should read as text, not as a link. */
a.plain{color:var(--text)}
a.plain:hover{color:var(--green-bright)}

/* ---------- the player page ----------
   One player is four screens' worth of material — what they've played,
   what they're paid, the day-by-day and the conversation — and as a
   single scroll the daily table sat underneath a form nobody had come to
   look at. Tabs, so each of the four is the whole screen when it's the
   one being read. Same palette, same cards; only the arrangement moved. */
.phead{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
       margin-bottom:4px}
.phead .idline{margin:0}
.phead-right{margin-left:auto;text-align:right}
.phead-right .rate-big{font-family:var(--mono);font-size:34px;font-weight:600;
       color:var(--gold-bright);line-height:1.15;letter-spacing:.5px}
.phead-right .rlabel{font-size:12px;text-transform:uppercase;
       letter-spacing:1.2px;color:var(--text-mute);margin-top:6px}

/* When the tier lapses, if they never play another hand. Deliberately
   quiet: it is a date to notice, not a warning. */
.expire{margin:10px 0 0;font-size:13px;color:var(--text-mute);
        max-width:260px;margin-left:auto;min-height:20px}
.expire b{font-family:var(--mono);font-weight:600;color:var(--gold-bright)}

/* The panels are all visible until the script marks the page tabbed, so
   a browser running no JavaScript gets the old single scroll rather than
   three quarters of a blank page. */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);
      margin:22px 0 0}
.tab{padding:11px 20px;font-size:15px;color:var(--text-dim);cursor:pointer;
     border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}
.tab:hover{color:var(--text)}
.tab.on{color:var(--green-bright);border-bottom-color:var(--green)}
.tabpanel{padding-top:8px}
.tabbed .tabpanel{display:none}
.tabbed .tabpanel.on{display:block}

.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;
         color:var(--text-mute);margin:26px 0 14px}
.tabpanel>.eyebrow:first-child{margin-top:0}

/* Label on the left, number on the right. The old three-column layout
   put a sentence of explanation beside every figure, which made a table
   of seven numbers into half a page of prose. */
.krow{display:flex;justify-content:space-between;align-items:baseline;
      gap:14px;padding:10px 0;border-bottom:1px solid rgba(24,39,28,.6)}
.krow:last-of-type{border-bottom:none}
.krow .l{color:var(--text-mute);font-size:15px;display:flex;
         align-items:center;gap:7px}
.krow .r{font-family:var(--mono);font-weight:500;text-align:right}
.krow .r.gold{color:var(--gold-bright)}
.krow .r.money{font-size:15px}

/* Those sentences, kept but folded away — the explanation is worth
   having the first time and worth nothing the twentieth. */
.q{flex:0 0 16px;width:16px;height:16px;border-radius:50%;
   border:1px solid var(--text-mute);color:var(--text-mute);font-size:10px;
   display:inline-flex;align-items:center;justify-content:center;
   cursor:help;position:relative;font-family:var(--body)}
.q:hover,.q:focus{color:var(--text);border-color:var(--green);outline:none}
.q .tip{display:none;position:absolute;bottom:24px;left:-10px;width:260px;
   background:var(--bg-raise);border:1px solid var(--line);
   border-radius:var(--r);padding:10px 12px;font-size:13px;line-height:1.5;
   color:var(--text-dim);text-align:left;font-weight:300;z-index:20;
   box-shadow:0 10px 28px rgba(0,0,0,.55)}
.q:hover .tip,.q:focus .tip{display:block}
/* In a money column the tip opens leftwards instead: a 260px box
   hanging off the right edge of the widest table in the app is one
   nobody can read. */
td.num .q .tip,td.money .q .tip{left:auto;right:-10px}

/* ---------- promo progress ---------- */
/* How far along one player is, as a bar. Gold while they are working
   towards it and green once they are inside the rule, which is the same
   pair of colours a tier and a qualified tag use everywhere else. The
   percentage is written out beside it as well: a bar is read at a glance
   and a number is read to be sure. */
.bar{height:7px;border-radius:99px;background:var(--bg-raise);
     border:1px solid var(--line);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--gold);
          border-radius:99px}
.bar.done>span{background:var(--green)}

/* ---------- the switch ---------- */
/* A sliding on/off toggle. It is a real <button role="switch"> rather
   than a styled div, so it is reachable by keyboard, says its state out
   loud, and — on the eligibility selector, the one screen that has it
   today — is a submit button that works with no JavaScript at all.
   Written here as a component because the next thing that wants an
   instant yes/no will want this control and not a second drawing of it.

   On is the portal green with a check; off is a dim track with a cross.
   Mixed is the third state a toggle-all needs: some of the set are on
   and some are off, and the knob sits between the two. */
.switch{display:inline-flex;align-items:center;padding:0;border:0;
        background:none;cursor:pointer;line-height:0;border-radius:99px;
        -webkit-appearance:none;appearance:none}
.switch:hover{background:none}
.switch .sw{position:relative;display:inline-block;width:42px;height:23px;
            border-radius:99px;background:var(--bg-raise);
            border:1px solid var(--line);
            transition:background .18s,border-color .18s}
.switch:hover .sw{border-color:var(--green)}
.switch:focus{outline:none}
.switch:focus-visible .sw{border-color:var(--green);
                          box-shadow:0 0 0 3px rgba(132,180,84,.22)}

/* The two icons sit on the track and the knob covers one of them. Both
   are in the markup either way and only their opacity moves, so nothing
   reflows as it slides. */
.switch .sw i{position:absolute;top:0;width:21px;line-height:21px;
              font-size:11px;font-style:normal;text-align:center;
              transition:opacity .18s}
.switch .sw i.y{left:1px;color:#06180a;opacity:0}
.switch .sw i.n{right:1px;color:var(--text-mute);opacity:1}
.switch .sw b{position:absolute;top:2px;left:2px;width:17px;height:17px;
              border-radius:50%;background:var(--text-dim);
              box-shadow:0 1px 3px rgba(0,0,0,.5);
              transition:transform .18s,background .18s}

.switch[aria-checked="true"] .sw{background:var(--green);
                                 border-color:var(--green)}
.switch[aria-checked="true"] .sw i.y{opacity:1}
.switch[aria-checked="true"] .sw i.n{opacity:0}
.switch[aria-checked="true"] .sw b{transform:translateX(19px);background:#f2f7f2}

.switch[aria-checked="mixed"] .sw{
  background:linear-gradient(90deg,var(--green) 0,var(--green) 50%,
                             var(--bg-raise) 50%,var(--bg-raise) 100%)}
.switch[aria-checked="mixed"] .sw i{opacity:0}
.switch[aria-checked="mixed"] .sw b{transform:translateX(9.5px)}

/* In flight, and while nothing is there to flip. */
.switch.busy{opacity:.45;pointer-events:none}
.switch[disabled]{opacity:.35;cursor:default}
.switch[disabled]:hover .sw{border-color:var(--line)}

/* The one on the toolbar, which reaches the whole filtered set rather
   than one row, is worth being bigger than the rows'. */
.switch.lg .sw{width:52px;height:28px}
.switch.lg .sw i{width:26px;line-height:26px;font-size:13px}
.switch.lg .sw b{width:22px;height:22px}
.switch.lg[aria-checked="true"] .sw b{transform:translateX(24px)}
.switch.lg[aria-checked="mixed"] .sw b{transform:translateX(12px)}

/* The toggle column on the eligibility selector: narrow, and the switch
   centred in it rather than left against the table's edge. */
td[data-col="pick"],th[data-col="pick"]{text-align:center}

/* A payout line under the player it belongs to. Players are paid in club
   chips, so a person's payout is split per club; these rows are that
   split and read as detail under the row that carries the total. */
tr.clubline > td{background:var(--bg-raise);
  border-top:0;padding-top:4px;padding-bottom:4px}

/* A voided ledger row: it stays, because it is history, and reads as
   struck. The void's who and why are in the row beside it. */
tr.void td{text-decoration:line-through;color:var(--text-mute)}
tr.void td .dim,tr.void td .pid{text-decoration:none}

/* ---------- the roster ----------
   As wide as the page, with the slack shared out. The card fills the
   page (shrink-wrapping the table left it 580px short, which looked
   wrong), so on the default seven columns at 1344px there are ~600px
   more than the content needs, and where they go decides how the table
   reads: all in one column was a void between the names and the rate,
   evenly across seven was a void between every pair of figures. So each
   column carries a weight, and the slack is split in proportion —
   Nickname the heaviest (the longest thing on the row, and a long one
   is what the air is for), the figures a little more than their
   content. Nothing wraps: a long nickname or a five-figure rake widens
   its column past its share instead. The dates are right-aligned like
   the figures, so the last column's air sits between it and its
   neighbour rather than against the card's edge.

   The weights are percentage widths that sum to well under 100% with
   every column on. That is what makes them weights: a table whose
   columns are all percentages hands the remainder out in proportion to
   them (every engine does), so turning a column on re-spreads the same
   slack over one more column, and a sum past 100% — which would honour
   the shares left to right and squeeze the last column to its content —
   can't happen. Fourteen columns plus a club apiece is wider than the
   page whatever the weights: then they fall back to their content and
   the card scrolls sideways rather than the table bleeding past its
   edge. The selector's switch column and the Clubs sub-columns carry
   a small weight of their own rather than a fixed width, because a
   fixed column is where an engine puts the remainder *first*: 64px on
   the switch column was 640px of it. */
.roster-card{padding:0;max-width:100%;overflow-x:auto}
table.roster{width:100%}
table.roster td{white-space:nowrap}
table.roster :is(th,td){padding-left:10px;padding-right:10px}
table.roster :is(th,td):is([data-col="pid"],[data-col="alias"],
                          [data-col="name"],[data-col="real"]){
   padding-left:12px;padding-right:12px}
table.roster :is(th,td)[data-col="name"]{width:12%;min-width:160px}
table.roster :is(th,td)[data-col="real"]{width:7%}
table.roster :is(th,td):is([data-col="pid"],[data-col="alias"],
                          [data-col="hold"]){width:6%}
table.roster :is(th,td):is([data-col="rate"],[data-col="rake"],
                          [data-col="deposits"],[data-col="cashouts"],
                          [data-col="net"],[data-col="play"],
                          [data-col="dep"],[data-col="wd"]){width:6.5%}
table.roster :is(th,td):is([data-col="news"],[data-col="status"],
                          [data-col="pick"]){width:4%}
table.roster :is(th,td):is([data-col="play"],[data-col="dep"],[data-col="wd"]){
   text-align:right}
table.roster :is(th,td)[data-col="clubs"]{padding-left:4px;padding-right:4px}

/* The Clubs column on /players: a header spanning one sub-column per
   club, and boxes that are drawn disabled because they are read-only
   here — a membership is changed on the player page, where a derived
   one is shown apart from one set by hand.

   Each sub-column is the width of its box plus the smallest weight on
   the table (1%, against a figure column's 6.5%), so six clubs cost
   little more than two used to. That means nothing in the header may
   set the width: the club names run vertically, and the note under "Clubs" is
   taken out of the flow (absolute, so the table never measures it) and
   hung from the column's right edge — at two clubs it is wider than
   the span and reaches left over the top of the neighbouring headers,
   whose labels sit lower, at the middle of the two-row height. */
th.clubs-head{text-align:center;border-bottom:1px solid var(--line);
   position:relative;vertical-align:top;padding:10px 4px 26px}
th.clubs-head small{position:absolute;right:4px;top:28px;
   text-transform:none;letter-spacing:0;font-size:10px;font-weight:400;
   line-height:1.3;white-space:nowrap}
th.clubs-sub,td.clubs-cell{width:1%;min-width:28px;padding-left:4px;padding-right:4px}
/* A club name read bottom-to-top, its end sitting on the box beneath it.
   sideways-lr is exactly that; older engines get vertical-rl (top-to-
   bottom) turned round, which also turns the cell's bottom rule to the
   top, so that rule is drawn on the other edge for them. */
tr.subhead th.clubs-sub{text-align:start;font-size:11px;
   padding-top:8px;padding-bottom:8px;
   writing-mode:vertical-rl;transform:rotate(180deg);vertical-align:top;
   border-bottom:0;border-top:1px solid var(--line)}
@supports (writing-mode:sideways-lr){
  tr.subhead th.clubs-sub{writing-mode:sideways-lr;transform:none;
     vertical-align:bottom;border-top:0;border-bottom:1px solid var(--line)}}
td.clubs-cell{text-align:center}
/* The box, drawn by hand because a disabled native one is grey on grey:
   ticked is the portal green with the dark check the buttons use, empty
   is an outline and nothing in it. Still disabled — it only reads. */
input.rocheck{-webkit-appearance:none;appearance:none;
   width:16px;height:16px;margin:0;vertical-align:middle;
   border:1px solid var(--text-mute);border-radius:3px;background:var(--bg);
   cursor:not-allowed}
input.rocheck:checked{background:var(--green)
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%2306180a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
   center/13px no-repeat;border-color:var(--green)}