:root{
  --blue:#00537f; --blue-deep:#00283e; --ink:#0b0b0c; --lime:#d4f24a;
  --paper:#ffffff; --muted:#6b6f73;
  --pad:clamp(18px,3vw,40px);
  --line:rgba(255,255,255,.22);
  --bd:rgba(11,11,12,.14);
  --cell:#125f88; /* solid = white 7% over --blue */
  /* birthday week: frosting on top, berry underneath. The body stays dark so
     every white-on-dark component in the panel keeps its contrast; what changes
     is the colour the panel wears. */
  --frost:#ff9ecb; --frost-deep:#f5629f; --berry:#2c0f22; --berry-line:rgba(255,158,203,.42);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Schibsted Grotesk",system-ui,sans-serif;
  background:var(--paper);color:#dbe8f0;min-height:100vh;
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.mono{font-family:"Space Mono",monospace}

/* ---------- top bar ---------- */
.mbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px var(--pad);background:var(--blue-deep)}
.mbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;color:#fff;font-size:15px}
.mbar .brand .mk{width:26px;height:26px;flex:none}
.mbar .brand .mk svg{width:100%;height:100%;display:block}
.mbar .right{display:flex;align-items:center;gap:18px}
.mbar .who{color:rgba(255,255,255,.7);font-size:14px}
.mbar .who b{color:#fff;font-weight:700}
/* Padding grows the touch target to 44px; the matching negative margin keeps it
   out of the layout, so the bar stays the height it was. */
.mbar .logout{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime);font-weight:700;
  display:inline-flex;align-items:center;padding:13px 6px;margin:-13px -6px}
.mbar .logout:hover{text-decoration:underline}

/* ---------- layout: full-bleed two-tone splits ---------- */
.mwrap{flex:1;display:flex;flex-direction:column;align-items:stretch;padding:0}
.split{flex:1;width:100%;display:grid;grid-template-columns:2fr 3fr;align-items:stretch}
.sl{background:var(--paper);color:var(--ink);
  padding:clamp(40px,9vh,110px) clamp(32px,8.5vw,160px)}
.sl .stick{position:sticky;top:44px}
.sl .eyebrow{color:var(--ink)}
.sl h1{font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:.96;
  color:var(--ink);font-size:clamp(34px,4.5vw,68px)}
.sl h1 .dot{color:var(--lime)}
.sl .sub{margin-top:16px;color:#4a5055;font-size:15.5px;max-width:46ch}
.sl .sub a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sl .sub b{color:var(--ink)}
.sl :focus-visible{outline-color:var(--blue)}
.sr{background:var(--blue);min-width:0;
  padding:clamp(40px,9vh,110px) clamp(32px,8.5vw,160px)}
.sr .srin{max-width:860px}
.sr .srin.wide{max-width:none}
.srh{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;
  font-size:clamp(20px,2vw,26px)}
.srh .dot{color:var(--lime)}
@media(max-width:899px){
  .split{display:flex;flex-direction:column}
  .sl{padding:28px var(--pad) 32px}
  .sl .stick{position:static}
  .sr{flex:1;padding:28px var(--pad) 46px}
}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--lime);
  font-family:"Space Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:16px}
.eyebrow i{width:8px;height:8px;background:var(--lime);border:1px solid var(--ink);flex:none}
.sub{margin-top:12px;color:rgba(255,255,255,.72);font-size:15px}
.sub a{color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- banners ---------- */
.banner{padding:12px 15px;border-radius:11px;font-size:14px;line-height:1.5;margin-bottom:22px}
.banner.err{background:rgba(255,95,85,.12);border:1px solid rgba(255,120,110,.45);color:#ffd9d3}
.banner.ok{background:rgba(212,242,74,.12);border:1px solid rgba(212,242,74,.5);color:#efffc4}
/* warn: it worked, but the admin should notice the state it left behind */
/* opaque, because a low-alpha amber over the blue page just reads teal */
.banner.warn{background:#6b4408;border:1px solid rgba(245,175,60,.65);color:#ffe6bd}
.banner ul{margin:6px 0 0 18px}
.banner .capbump{display:inline-block;margin-left:10px}
.banner .capbump button{font:inherit;font-weight:700;cursor:pointer;color:#0b0b0c;background:#f5af3c;
  border:none;border-radius:8px;padding:5px 11px}
.banner .capbump button:hover{background:#ffc266}
/* a state, not an action: never underlined, so it does not read as a link */
.alreadyin{margin-left:14px;font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;white-space:nowrap}

/* ---------- forms ---------- */
.mform{margin-top:26px;display:flex;flex-direction:column;gap:17px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:flex;flex-direction:column}
.field[hidden]{display:none}
.fl{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:7px}
.fl .opt{color:rgba(255,255,255,.38)}
/* birthday: day / month / year selects (members/_birthday_field.php). Three
   controls on one line, wrapping on a narrow phone; the year is widest because
   it is the one people hunt for. */
.bdaysel{display:flex;gap:8px;flex-wrap:wrap}
.bdaysel select{flex:1 1 96px;min-width:0}
.bdaysel select:last-child{flex:1 1 116px}
.mform input[type=text],.mform input[type=email],.mform input[type=password],
.mform input[type=tel],.mform input[type=number],.mform input[type=date],
.mform input[type=time],.mform textarea,.mform select{
  width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  padding:12px 14px;color:#fff;font-family:inherit;font-size:15px;transition:border-color .15s,background .15s}
.mform input:focus,.mform textarea:focus,.mform select:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.08)}
.mform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.hint{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.65)}

/* show/hide password (members.js button[data-reveal]) */
.pwbox{position:relative}
.pwbox input{padding-right:62px}
.pwreveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:rgba(255,255,255,.65);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 8px}
.pwreveal:hover,.pwreveal:focus-visible{color:var(--lime)}

/* file input */
.filerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filebtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:14px;
  color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:10px 16px}
.filebtn:hover{border-color:var(--lime)}
.filerow input[type=file]{position:absolute;left:-9999px}
.filename{font-size:13px;color:rgba(255,255,255,.7)}
.avatarprev{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--line);display:none}

/* photo crop editor (register + edit) */
.cropbox{margin-top:16px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.cropbox[hidden]{display:none}
.cropstage{width:220px;height:220px;flex:none;position:relative;overflow:hidden;border-radius:50%;
  background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.4);cursor:grab;touch-action:none}
.cropstage:active{cursor:grabbing}
.cropstage img{position:absolute;top:0;left:0;max-width:none;user-select:none;pointer-events:none}
.cropctl{flex:1;min-width:180px;max-width:300px}
.cropctl input[type=range]{width:100%;accent-color:var(--lime);cursor:pointer}

/* numbered steps (e.g. check-your-email) */
.steps{margin:26px 0 0;padding:0;list-style:none;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-left:54px;margin-top:20px;
  color:rgba(255,255,255,.82);font-size:15px;line-height:1.6}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--ink);font-weight:700;font-family:"Space Mono",monospace;font-size:15px}
.steps li b{color:#fff}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- skill scale (signature) ---------- */
.skill{margin-top:2px}
.skill .scale{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:8px}
.skill .scale input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.skill .scale label{display:flex;align-items:center;justify-content:center;height:46px;
  border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer;font-weight:800;font-size:15px;
  color:#fff;transition:background .12s,border-color .12s,transform .06s;user-select:none}
.skill .scale label:hover{border-color:rgba(212,242,74,.6)}
.skill .scale input:checked + label{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.skill .scale input:focus-visible + label{outline:2px solid var(--lime);outline-offset:2px}
.skill .scale label:active{transform:translateY(1px)}
.skill .ends{display:flex;justify-content:space-between;margin-top:8px;
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.skill .desc{margin-top:16px;border-left:2px solid var(--lime);padding:2px 0 2px 15px;min-height:44px}
.skill .desc .t{font-weight:800;color:#fff;font-size:16px}
.skill .desc .t b{color:var(--lime)}
.skill .desc .d{color:rgba(255,255,255,.72);font-size:14px;margin-top:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;
  color:var(--ink);background:var(--lime);border:none;border-radius:999px;padding:14px 26px;cursor:pointer;
  transition:background .15s,opacity .15s}
.btn:hover{background:#e2ff5c}
.btn:disabled{opacity:.55;cursor:default}
.btn.block{width:100%}
.rowbtn{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.altlink{font-size:14px;color:rgba(255,255,255,.8)}
.altlink a{color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.checkrow{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.8);cursor:pointer}
.checkrow input{width:18px;height:18px;accent-color:var(--lime);cursor:pointer}
.radios{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rad{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.8);cursor:pointer}
.rad input{width:18px;height:18px;accent-color:var(--lime);cursor:pointer;flex:none}

/* ---------- admin messages: who gets it ----------
   Four tickable groups instead of one dropdown, because a club email usually
   goes to a combination. The count sits on the right of each row so the size
   of the send is visible before anything is written. */
.audpick{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:4px}
.audrow{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.1);transition:background .12s}
.audrow:first-child{border-top:none}
.audrow:hover{background:rgba(255,255,255,.04)}
.audrow input{width:18px;height:18px;accent-color:var(--lime);cursor:pointer;flex:none}
.audrow:has(input:checked){background:rgba(212,242,74,.07)}
.audname{flex:1;min-width:0;font-size:15px;font-weight:700;color:#fff}
.audname small{display:block;font-weight:400;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px}
.audn{flex:none;font-family:'Space Mono',monospace;font-size:14px;color:var(--lime);font-weight:700}
.audfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.audtotal{font-size:13.5px;color:rgba(255,255,255,.8)}
.audtotal.none{color:rgba(255,255,255,.5)}
.audall{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-size:13.5px;
  color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Two secondary buttons kept together on the right of a rowbtn, so the send
   button stays alone on the left and is never the one you hit by reflex. */
.btnpair{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- admin: one member's whole trail ----------
   Nights collapse, because a season of them would bury the summary above. The
   headline stays on the summary line so a night can be judged without opening
   it. */
.manight{border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin-top:10px}
.manight[open]{background:rgba(255,255,255,.03)}
.manight>summary{cursor:pointer;font-size:15px;color:#fff;list-style:none;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.manight>summary::-webkit-details-marker{display:none}
.manight>summary::before{content:"\25B8";display:inline-block;color:var(--lime);
  transition:transform .15s;flex:none}
.manight[open]>summary::before{transform:rotate(90deg)}
.manight .masub{font-size:13.5px;color:rgba(255,255,255,.65);font-weight:400}
.masplit{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.manote{border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-top:10px}
.manotebody{font-size:14px;color:#dbe8f0;margin-top:6px;white-space:pre-wrap}
.machips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.machip{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  color:rgba(255,255,255,.85)}
@media (max-width:760px){.masplit{grid-template-columns:1fr}}

/* ---------- profile (landing) ---------- */
.phead{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pavatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--lime);flex:none;background:rgba(255,255,255,.06)}
.pavatar.ph{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:32px;color:var(--lime);text-transform:uppercase}
.pname{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(24px,3.4vw,34px);color:#fff;line-height:1.05}
.pemail{color:rgba(255,255,255,.6);font-size:14px;margin-top:4px}
.badge{display:inline-flex;align-items:center;gap:8px;margin-top:11px;font-family:"Space Mono",monospace;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;
  padding:6px 13px;border:1px solid rgba(255,255,255,.28);color:#fff}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.badge.member{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.badge.admin{border-color:#7fd1ff;color:#bfe8ff}
.rolehint{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.7);max-width:56ch}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42);padding:11px 18px;font-size:14px}
.btn.ghost:hover{border-color:var(--lime);background:rgba(212,242,74,.06)}
.currentavatar{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.currentavatar img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.formsplit{margin:30px 0;border:none;border-top:1px solid var(--line)}
.pgrid{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* An odd cell out would leave a hole in the two-column grid, so a cell can
   ask for the whole row. Used by the night page's picker summary. */
.pgrid .pcell.wide{grid-column:1 / -1}
.pcell{background:var(--cell);padding:18px 20px}
.pcell .k{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.pcell .v{font-weight:700;font-size:18px;color:#fff;margin-top:5px;letter-spacing:-.01em}
.pcell .vsub{font-weight:400;color:rgba(255,255,255,.6);font-size:14px}
.pnote{margin-top:24px;font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.65)}

/* ---------- dashboard tabs ---------- */
.dashtabs .sl .eyebrow{color:var(--ink);margin-bottom:0}
.railid{display:flex;align-items:center;gap:12px;margin:18px 0 4px}
.railid .pavatar{width:44px;height:44px;border-color:var(--ink)}
.railid .pavatar.ph{background:rgba(11,11,12,.05);color:var(--blue);font-size:16px}
.railid .pwho{min-width:0}
.railid .rname{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:15px;color:var(--ink);line-height:1.12;word-break:break-word}
.railid .badge{margin-top:6px;border-color:rgba(11,11,12,.38);color:var(--ink);padding:3px 9px;font-size:9.5px}
.railid .badge.member{background:var(--lime);border-color:var(--ink);color:var(--ink)}
.railid .badge.admin{border-color:var(--blue);color:var(--blue)}
.tabnav{margin-top:22px;display:flex;flex-direction:column;gap:5px}
.tab{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;
  border:1px solid transparent;color:var(--ink);font-weight:800;font-size:14.5px;letter-spacing:-.01em;
  transition:background .15s,border-color .15s,color .15s}
.tab svg{width:18px;height:18px;flex:none;opacity:.8}
.tab .tlabel{flex:1;line-height:1.2}
.tab .tnum{font-family:"Space Mono",monospace;font-size:11.5px;font-weight:700;line-height:1;
  background:rgba(11,11,12,.09);color:var(--ink);border-radius:999px;padding:4px 8px;min-width:22px;text-align:center}
.tab:hover{background:rgba(11,11,12,.05)}
.tab.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tab.on svg{opacity:1}
.tab.on .tnum{background:rgba(255,255,255,.22);color:#fff}
.dashtabs .sl :focus-visible{outline-color:var(--blue)}
/* side-nav back link (admin) */
.raillink{display:inline-block;margin-top:20px;font-family:"Space Mono",monospace;font-size:12px;
  letter-spacing:.05em;color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.raillink:hover{color:var(--ink)}
/* content heading inside the blue panel (admin) */
.admhead{margin-bottom:8px}
.admhead h1{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  color:#fff;font-size:clamp(26px,3vw,40px)}
.admhead h1 .dot{color:var(--lime)}
.admhead .sub{margin-top:10px}
@media(min-width:900px){
  /* slim fixed side-nav, content takes the rest */
  .dashtabs{grid-template-columns:246px minmax(0,1fr)}
  .dashtabs .sl{padding:38px 20px;border-right:1px solid var(--bd)}
  .dashtabs .sl .stick{top:28px}
  .dashtabs .sr{padding:clamp(34px,6vh,60px) clamp(26px,4vw,70px)}
  .dashtabs .sr .srin{max-width:1060px}
  .adminshell .sr .srin{max-width:1240px}
  .adminshell .sr .srin.wide{max-width:none}
}
@media(max-width:899px){
  .dashtabs .sl{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--bd);
    padding:14px var(--pad) 14px}
  .dashtabs .sl .eyebrow,.railid{display:none}
  .tabnav{flex-direction:row;flex-wrap:wrap;margin-top:0;gap:8px}
  .tab{flex:1 1 calc(50% - 4px);justify-content:center;padding:12px 10px;font-size:13.5px;border:1px solid var(--bd)}
  .tab .tlabel{flex:0 1 auto}
  .tab .tnum{padding:3px 7px;min-width:20px;font-size:11px}
  .raillink{margin-top:12px}
}

/* ---------- footer ---------- */
.mfoot{padding:22px var(--pad);background:var(--ink);text-align:center;
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* nowrap so the line breaks before the link rather than orphaning "SITE" */
.mfoot a{color:rgba(255,255,255,.85);font-weight:700;white-space:nowrap}

/* ---------- admin ---------- */
.mbar .alink{display:inline-flex;align-items:center;gap:7px;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#7fd1ff;font-weight:700;line-height:1;
  border:1px solid rgba(127,209,255,.5);border-radius:999px;padding:7px 13px;
  transition:background .15s,color .15s,border-color .15s}
.mbar .alink svg{width:14px;height:14px;flex:none}
.mbar .alink:hover{background:#7fd1ff;color:var(--blue-deep);border-color:#7fd1ff;text-decoration:none}
.mform textarea{min-height:150px;resize:vertical;font-family:inherit;line-height:1.5}
.statrow{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* rows with a tile count other than 4: reflows itself at any width instead of
   fighting the max-width:720px rule below with a fixed column count that an
   inline style used to hard-code (that inline override was clipping tiles
   off-screen on narrow phones, see admin overview "Sign-ups" tile) */
.statrow.reflow{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--cell);padding:16px 18px;display:block}
a.stat{text-decoration:none;color:inherit;position:relative;transition:background .12s}
a.stat::after{content:"→";position:absolute;top:14px;right:15px;font-size:14px;color:#fff;
  opacity:0;transform:translateX(-3px);transition:opacity .12s,transform .12s}
a.stat:hover{background:#166f9f}
a.stat:hover::after{opacity:.9;transform:translateX(0)}
a.stat:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.stat .k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.65)}
.stat .v{font-weight:900;font-size:28px;color:#fff;margin-top:3px;letter-spacing:-.02em}
.adminnav{margin-top:18px;display:grid;gap:12px}
.adminnav .tool{display:block;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;transition:border-color .15s,background .15s}
.adminnav .tool:hover{border-color:var(--lime);background:rgba(212,242,74,.05)}
.adminnav .tool b{color:#fff;font-size:17px}
.adminnav .tool span{display:block;color:rgba(255,255,255,.72);font-size:14px;margin-top:4px}
.tbar{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tbar input[type=text],.tbar select{background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px 12px;
  color:#fff;font-family:inherit;font-size:14px}
/* wide enough to show the whole placeholder: below this the filter wraps to
   its own line rather than squeezing the search box into an ellipsis */
.tbar input[type=text]{flex:1;min-width:210px}
.tbar input:focus,.tbar select:focus{outline:none;border-color:var(--lime)}
.btn.sm{padding:10px 20px;font-size:14px}
.scount{margin-top:14px;font-family:"Space Mono",monospace;font-size:12px;
  letter-spacing:.06em;color:rgba(255,255,255,.7)}
.atable{margin-top:10px;width:100%;border-collapse:collapse;font-size:14px}
.atable th{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.68);text-align:left;
  padding:10px;border-bottom:1px solid var(--line)}
.atable th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.atable th.sortable:hover{color:#fff}
.atable th.sortable:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.atable th.asc,.atable th.desc{color:var(--lime)}
.atable th .sarrow{display:inline-block;width:.7em;font-size:9px;opacity:0}
.atable th.asc .sarrow,.atable th.desc .sarrow{opacity:1}
.atable th.asc .sarrow::after{content:"\2191"}
.atable th.desc .sarrow::after{content:"\2193"}
.atable td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.07);
  color:#dbe8f0;vertical-align:middle}
.atable tr:hover td{background:rgba(255,255,255,.03)}
.rowlink{color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rowlink.mute{color:rgba(255,255,255,.72)}
button.rowlink{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.rowlink.copied{color:#dbe8f0;text-decoration:none}
/* ---------- session page: Stats / Games feedback tabs ---------- */
.viewtabs{display:flex;gap:24px;margin:26px 0 24px;border-bottom:1px solid var(--line)}
.viewtab{display:inline-flex;align-items:center;gap:7px;padding:0 0 10px;margin-bottom:-1px;
  font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);border-bottom:2px solid transparent}
.viewtab:hover{color:#fff}
.viewtab.current{color:var(--lime);font-weight:700;border-bottom-color:var(--lime)}
.viewtab .vtcur{font-size:9.5px;letter-spacing:.05em;border:1px solid var(--lime);border-radius:999px;padding:2px 7px}
/* ---------- past sessions: the whole line opens the night ---------- */
.pastrow{cursor:pointer}
.pastrow .pastdate{color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gbadge{display:inline-block;font-family:"Space Mono",monospace;font-size:10.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 10px;color:#fff}
.gbadge.a{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.gbadge.b{border-color:#7fd1ff;color:#bfe8ff}
.gbadge.none{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.65)}
.guest-access{margin:0;border:1px solid rgba(212,242,74,.35);border-radius:14px;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.guest-access legend{padding:0 6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.guest-access .hint{margin-top:-4px}
.guest-access .field{max-width:380px}
.dangerzone{margin-top:30px;border:1px solid rgba(255,95,85,.4);border-radius:14px;padding:20px 22px}
.dangerzone h2{font-size:15px;font-weight:800;text-transform:uppercase;color:#ffb4ac}
.dangerzone p{font-size:14px;color:rgba(255,255,255,.75);margin:6px 0 14px}
.btn.danger{background:#ff5f55;color:#fff}
.btn.danger:hover{background:#ff756c}
.cancelled td{opacity:.45;text-decoration:line-through}
.cancelled td.actions{opacity:1;text-decoration:none}
@media(max-width:720px){
  .statrow{grid-template-columns:1fr 1fr}
  .atable thead{display:none}
  .atable,.atable tbody,.atable tr,.atable td{display:block;width:100%}
  .atable tr{border:1px solid var(--line);border-radius:12px;margin-top:12px;padding:8px 14px}
  .atable tr:hover td{background:transparent}
  .atable td{border:none;padding:6px 0}
  .atable td[data-l]::before{content:attr(data-l);display:block;font-family:"Space Mono",monospace;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
}

@media(max-width:560px){
  .grid2{grid-template-columns:1fr}
  .skill .scale{grid-template-columns:repeat(5,1fr)}
  .pgrid{grid-template-columns:1fr}
  .mbar .right{gap:12px}
  .mbar .who{display:none}
}

/* ---------- upcoming sessions (dashboard) ---------- */
.sh{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:19px;color:#fff;margin-bottom:14px}
.snone{color:rgba(255,255,255,.72);font-size:14.5px}
.srow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"when seg" "count seg";
  gap:10px 18px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.07);
  border-radius:14px;padding:15px 18px;margin-bottom:12px}
/* A session you are in. The lime is the same lime as the confirmed button, so
   the colour keeps one meaning across the card. The left edge does the work and
   the wash stays faint: four confirmed cards in a row should still read as a
   list, not as an alarm. */
.srow.mine{border-color:rgba(212,242,74,.45);background:rgba(212,242,74,.08);
  box-shadow:inset 3px 0 0 var(--lime)}
/* A night you have said no to. Same device as .mine and the same colour as the
   "Can't make it" button, so the edge means the same thing wherever it appears.
   Deliberately fainter than the lime one: this is you opting out, not a problem,
   and it must not be mistaken for the cancelled treatment below. */
.srow.out{border-color:rgba(255,141,132,.34);background:rgba(255,141,132,.055);
  box-shadow:inset 3px 0 0 rgba(255,141,132,.75)}
/* cancelled wins over both: the club calling a night off is the more important
   thing to notice, and it should never be softened by a personal state.
   Amber, because neither of the other two edges may be borrowed: lime already
   means you are in and salmon means you are out, and this is neither, it is
   the night itself being gone. It used to be the faintest card on the page,
   half-opacity and struck through end to end, which is the treatment a screen
   gives something you may ignore. The strike now falls on the date alone, and
   the card is as legible as every other one. */
.srow.cxl,.srow.cxl.mine,.srow.cxl.out{border-color:rgba(255,190,105,.5);
  background:rgba(255,190,105,.1);box-shadow:inset 3px 0 0 #ffbe69}
.srow.cxl .swhen b{text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:rgba(255,190,105,.9)}
/* why there is no session, in the mono face the card's other data uses */
.scxl{margin:7px 0 0;font-family:"Space Mono",monospace;font-size:12px;line-height:1.55;
  letter-spacing:.02em;color:#ffd8ad}

/* a preview session: yours alone, and never mistakable for a real night */
.prevtag{display:inline-block;vertical-align:middle;margin-left:8px;font-family:"Space Mono",monospace;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.8);border-radius:999px;padding:2px 8px}

/* countdown: data, so it takes the mono face the rest of the card's data uses */
.scdown{margin:6px 0 0;font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.02em;
  color:rgba(255,255,255,.62);display:flex;align-items:baseline;gap:7px}
.scdown b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
/* Only the moment a member can act on gets the accent. A clock ticking down to
   a session they have already confirmed does not need to shout. */
.scdown.opens b,.scdown.guest_admit b{color:var(--lime)}
.scdown.soon b{animation:cdpulse 1s ease-in-out infinite}
.scdown.done .lbl{color:var(--lime)}
@keyframes cdpulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.scdown.soon b{animation:none}}

/* the row of faces: who is already coming, before you click anything */
.facepile{display:inline-flex;align-items:center;background:none;border:none;
  padding:0;margin:0;cursor:pointer}
.facepile:empty{display:none}
/* The ring separates overlapping faces. Translucent dark rather than a hex
   matching the card, because the card now has four tints (plain, confirmed,
   declined, cancelled) and a fixed colour would be wrong on three of them. */
.facepile img,.facepile .fph{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(0,0,0,.28);margin-right:-9px;transition:transform .12s}
.facepile .fph{display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:var(--lime);font-weight:800;font-size:12px}
.facepile .fmore{margin-left:15px;font-family:"Space Mono",monospace;font-size:11.5px;font-weight:700;
  color:rgba(255,255,255,.65)}
/* the whole pile lifts as one, rather than 6 separate hover targets twitching */
.facepile:hover img,.facepile:hover .fph{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.facepile img,.facepile .fph{transition:none}
  .facepile:hover img,.facepile:hover .fph{transform:none}}
.swhen{grid-area:when;min-width:0}
.swhen b{color:#fff;font-size:16px;display:block}
.swhen span{color:rgba(255,255,255,.75);font-size:13px}
.sstat{grid-area:seg;justify-self:end}
/* faces and the head count share this line and wrap together on a narrow card */
.smeta{grid-area:count;min-width:0;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.smeta .snote{flex-basis:100%}
.seg{grid-area:seg;justify-self:end;display:flex;align-items:stretch;
  border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
/* display:flex above beats the browser's [hidden], and a session that has not
   opened yet keeps its buttons hidden until the countdown reveals them */
.seg[hidden]{display:none}
.seg>*{display:flex}
.seg>*+*{border-left:1px solid rgba(255,255,255,.25)}
/* min-height 44px: confirming or cancelling a spot is the one thing members do
   from a phone, usually one-handed, and a mis-tap cancels a session. 44px is the
   iOS touch-target floor; Android asks for 48. */
.segbtn{background:transparent;border:none;color:rgba(255,255,255,.75);font-family:inherit;
  font-weight:700;font-size:13.5px;padding:11px 18px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
span.segbtn{cursor:default}
.segbtn small{font-size:15px;font-weight:800;line-height:1}
.segbtn.on{background:var(--lime);color:var(--ink)}
.segbtn.off{background:rgba(255,141,132,.2);color:#ffc9c4}
.segbtn.wl{background:rgba(255,211,127,.18);color:#ffe3ae}
/* Undecided reads as a real answer, not an absence, so it gets a fill like the
   other two. Deliberately the quietest of the three: it is where everyone
   starts, and it should not compete with the choice we want people to make. */
.segbtn.un{background:rgba(255,255,255,.16);color:#fff}
/* interactive toggles only (dashboard attendance button, roster/sessions <summary>);
   plain .scount labels keep the muted style defined earlier and must NOT look like links */
/* 40px rather than the full 44: this sits directly under the confirm/decline
   pair on a narrow screen, and a taller box would put its hit area within
   thumb-slip distance of the buttons above it. */
button.scount,summary.scount{background:none;border:none;cursor:pointer;font-family:"Space Mono",monospace;font-size:12px;
  letter-spacing:.04em;color:var(--lime);text-decoration:underline;text-underline-offset:3px;
  padding:0;min-height:40px;display:inline-flex;align-items:center}
/* The dashboard card's version: not a link, so it loses the underline and the
   link colour. Scoped to .smeta so summary.scount elsewhere keeps its own look. */
.smeta .scount{flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;
  color:rgba(255,255,255,.6);min-height:0;padding:2px 0}
.smeta .scount .ctext b{color:#fff;font-weight:700;letter-spacing:.02em}
.smeta .scount:hover .ctext b{color:var(--lime)}
/* How full the night is, at a glance. Thin and quiet: it is a hint beside the
   words, never the thing carrying the meaning. */
.meter{display:block;width:150px;max-width:100%;height:6px;border-radius:999px;
  background:rgba(255,255,255,.16);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--lime);
  transition:width .5s ease}
/* the last few spots. The text says "2 spots left" too, so this is never alone */
.meter.tight i{background:#f5af3c}
/* full: nothing left to act on, so the bar stops competing for attention */
.meter.full i{background:rgba(255,255,255,.42)}
@media(prefers-reduced-motion:reduce){.meter i{transition:none}}

.sbadge{display:inline-block;font-family:"Space Mono",monospace;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 11px}
.sbadge.on{background:var(--lime);color:var(--ink)}
.sbadge.wait{border:1px solid #ffd37f;color:#ffe3ae}
.sbadge.off{border:1px solid rgba(255,255,255,.45);color:rgba(255,255,255,.78)}
/* filled, like the lime "you're in" badge: a cancellation is a statement, not
   a faint absence of one */
.sbadge.cxl{background:#ffbe69;color:var(--ink)}
.snote{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.7)}
.sdlg{background:var(--blue-deep);margin:auto;color:#dbe8f0;border:1px solid var(--line);border-radius:16px;
  padding:26px;max-width:420px;width:calc(100% - 40px)}
.sdlg::backdrop{background:rgba(0,10,18,.7);backdrop-filter:blur(3px)}
.sdlg p{font-size:15px;line-height:1.55}
.sdlg h3{color:#fff;font-weight:900;text-transform:uppercase;font-size:16px;margin-bottom:14px}
.sdlgbtns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.attrow{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.attrow img,.attph{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.attph{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);
  color:var(--lime);font-weight:800}
.attrow span{color:#fff;font-size:14.5px}
.attrow i{margin-left:auto;font-style:normal;font-family:"Space Mono",monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.attrow .bday{display:inline-flex;align-items:center;gap:5px;font-family:"Space Mono",monospace;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  background:var(--lime);border-radius:999px;padding:3px 9px 3px 7px;white-space:nowrap;flex:none}
.attrow .bday svg{width:13px;height:13px;flex:none}
@media(max-width:560px){
  .srow{grid-template-columns:1fr;grid-template-areas:"when" "seg" "count";gap:8px}
  .sstat,.seg{justify-self:start}
  /* Three segments no longer fit a 375px screen at their natural width, so the
     control spans the row and the segments share it evenly. Narrower, never
     shorter: min-height from the base rule still applies, because these are the
     buttons people press one-handed. */
  .seg{width:100%}
  .seg>*{flex:1;min-width:0}
  .segbtn{width:100%;justify-content:center;padding:11px 6px;font-size:12.5px;gap:5px}
}

/* ---------- membership pill (members list) ---------- */
a.gbadge{cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
a.gbadge:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.28)}
a.gbadge:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.gbadge.due{background:#ff5f55;border-color:#ff5f55;color:#fff}
.gbadgecap{margin-top:6px;font-family:"Space Mono",monospace;font-size:10.5px;
  letter-spacing:.04em;color:rgba(255,255,255,.5)}
.gbadgecap.due{color:#ffb4ac}

/* ---------- membership modal + panel ---------- */
.mmodal-back{position:fixed;inset:0;z-index:80;background:rgba(0,20,32,.74);
  display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
.mmodal-back[hidden]{display:none}
.mmodal{width:100%;max-width:470px;background:var(--blue);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.5);overflow:hidden}
.mmodal header{background:var(--blue-deep);padding:18px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.mmodal header .who b{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.01em}
.mmodal header .who span{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.mmx{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:24px;line-height:1;cursor:pointer}
.mmx:hover{color:#fff}
.mbody{padding:20px 22px 24px}

/* panel is reused on the full page too (.mpanel-page sits in .sr) */
.mpanel-page{margin-top:8px}
.mstatus{border-radius:11px;padding:12px 15px;font-size:14px;line-height:1.5;margin-bottom:20px;
  display:flex;gap:10px;align-items:baseline}
.mstatus .tag{font-family:"Space Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;flex:none}
.mstatus.ok{background:rgba(212,242,74,.13);border:1px solid rgba(212,242,74,.5);color:#eaffbf}
.mstatus.ok .tag{background:var(--lime);color:var(--ink)}
.mstatus.due{background:rgba(255,95,85,.14);border:1px solid rgba(255,120,110,.5);color:#ffd9d3}
.mstatus.due .tag{background:#ff5f55;color:#fff}
.mstatus.none{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82)}
.mstatus.none .tag{background:rgba(255,255,255,.22);color:#fff}

.mgroup{margin-bottom:22px}
.mseg{display:flex;gap:8px;margin:8px 0 12px}
.mseg label{flex:1}
.mseg input{position:absolute;opacity:0;width:0;height:0}
.mseg span{display:block;text-align:center;border:1px solid rgba(255,255,255,.24);border-radius:10px;
  padding:10px 6px;font-weight:700;font-size:13.5px;color:#fff;cursor:pointer;transition:.12s}
.mseg label:hover span{border-color:rgba(212,242,74,.6)}
.mseg input:checked + span{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.mseg input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}
.mnote{margin:0;font-family:"Space Mono",monospace;font-size:11.5px;color:rgba(255,255,255,.5)}
/* .btn sets display:inline-flex, which beats the browser's [hidden] rule, so the
   no-JS Save-group fallback needs saying twice before it will actually hide. */
.mnote[hidden],.mgroup .btn[hidden]{display:none}

.mpay{margin-bottom:8px;gap:14px}
.mpay .btn{margin-top:4px}

.mhist{margin-top:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.mhist h3{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 10px}
.mempty{color:rgba(255,255,255,.6);font-size:14px;margin:0}
.mhtable{width:100%;border-collapse:collapse}
.mhtable td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}
.mhtable tr:last-child td{border-bottom:0}
.mhtable td.s b{color:#fff;font-size:14.5px;font-weight:700}
.mhtable td.s small{display:block;font-family:"Space Mono",monospace;font-size:11.5px;
  color:rgba(255,255,255,.5);margin-top:2px}
.mhtable td.amt{text-align:right;color:#fff;font-weight:800;font-size:15px;white-space:nowrap}
.mhtable td.del{width:34px;text-align:right;padding-left:10px}
.mhtable td.del form{display:block;line-height:0}
.mdel{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.18);
  background:none;color:rgba(255,255,255,.5);font-size:17px;line-height:1;cursor:pointer;
  padding:0;transition:.12s}
.mdel:hover{border-color:rgba(255,120,110,.7);background:rgba(255,95,85,.16);color:#ffd9d3}
.mdel:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.mdel[disabled]{opacity:.45;cursor:default}

.mflash{border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:16px}
.mflash.err{background:rgba(255,95,85,.14);border:1px solid rgba(255,120,110,.5);color:#ffd9d3}
.mflash.ok{background:rgba(212,242,74,.13);border:1px solid rgba(212,242,74,.5);color:#eaffbf}

/* ---------- AI draft review (admin messages) ---------- */
.aipanel{margin-top:22px;border:1px solid rgba(212,242,74,.35);border-radius:14px;padding:18px 20px;
  background:rgba(212,242,74,.05)}
.aipanel[hidden]{display:none}
.aipanel h3{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 12px}
.aisame{color:rgba(255,255,255,.7);font-size:14px;margin:0}
.ailist{list-style:none;margin:0;padding:0}
.ailist li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ailist li:last-child{border-bottom:0}
.ailist b{display:block;color:#fff;font-size:14.5px;font-weight:700}
.ailist span{display:block;color:rgba(255,255,255,.55);font-size:13px;margin-top:2px}
.aiwarn{background:#6b4408;border:1px solid rgba(245,175,60,.65);color:#ffe6bd;border-radius:10px;
  padding:11px 14px;font-size:13.5px;margin-bottom:14px;line-height:1.5}
.aiwarn ul{margin:6px 0 0 18px;padding:0}
/* Two columns on a desktop, stacked on a phone: a side-by-side that squeezes
   into 160px each is worse than reading one after the other. */
.aicols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 18px}
@media (max-width:640px){.aicols{grid-template-columns:1fr}}
.aicol{border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:12px 14px;min-width:0}
.aicol.sug{border-color:rgba(212,242,74,.55);background:rgba(212,242,74,.07)}
.aicol .k{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:7px}
.aicol.sug .k{color:var(--lime)}
.aicol .s{color:#fff;font-weight:700;font-size:14.5px;margin-bottom:8px;overflow-wrap:anywhere}
.aicol .t{white-space:pre-wrap;color:#dbe8f0;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}

/* ---------- admin skill assessment ---------- */
.skillread{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:12px 14px;font-size:16px;color:#fff}
.skillread b{color:var(--lime);font-weight:800}
.skillread span{display:block;margin-top:4px;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.adminskill .naopt{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;
  color:rgba(255,255,255,.82);margin:2px 0 12px}
.adminskill .naopt input{accent-color:var(--lime);width:17px;height:17px;cursor:pointer}

/* skill column on the members list */
.skcell{display:inline-flex;gap:7px;flex-wrap:wrap}
.skself,.skadmin{display:inline-flex;align-items:baseline;gap:5px;font-weight:800;font-size:15px;
  color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:3px 9px}
.skadmin{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.skself i,.skadmin i{font-style:normal;font-family:"Space Mono",monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.62}

/* skill pill is now a button; reset the UA button chrome so it still looks
   like the plain span it used to be, and add a hover/focus affordance */
button.skcell{background:transparent;border:0;padding:0;margin:0;font:inherit;text-align:left;
  cursor:pointer;transition:transform .12s,box-shadow .12s}
button.skcell:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.28)}
button.skcell:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:8px}

/* ---------- quick admin-skill popover (members list) ---------- */
.skpop{position:absolute;z-index:90;width:224px;background:var(--blue);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:14px}
.skpop[hidden]{display:none}
.skpop-name{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skpop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.skpop-grid button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:8px;
  color:#fff;font-weight:800;font-size:14px;padding:7px 0;cursor:pointer;transition:.12s}
.skpop-grid button:hover{border-color:var(--lime);color:var(--lime)}
.skpop-grid button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.skpop-grid button.cur{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.skpop-grid button:disabled,.skpop-clear:disabled{opacity:.5;cursor:not-allowed}
.skpop-clear{display:block;width:100%;background:transparent;border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:rgba(255,255,255,.8);font-size:12.5px;padding:8px 10px;cursor:pointer;transition:.12s}
.skpop-clear:hover{border-color:var(--lime);color:var(--lime)}
.skpop-clear:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.skpop-err{margin-top:9px;font-size:12.5px;color:#ffd9d3}
.skpop-err[hidden]{display:none}

/* ---------- face beside the name (admin accounts list) ---------- */
.mwho{display:flex;align-items:center;gap:11px}
.mface{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.mface.ph{display:inline-flex;align-items:center;justify-content:center;font-weight:800;
  font-size:12.5px;color:var(--lime);text-transform:uppercase;letter-spacing:.02em}

/* ---------- all members roster (member dashboard) ---------- */
/* the roster panel runs full width, so the faces are not stranded in a column
   on a wide monitor. Keeps the nudge banner readable at its normal width. */
.dashtabs .sr .srin.wide{max-width:none}
.dashtabs .sr .srin.wide .photonudge{max-width:1060px}
.pplintro{margin:12px 0 24px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.pplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:26px 18px}
.pplcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;
  color:inherit;text-decoration:none;transition:transform .13s}
.pplcard:hover{transform:translateY(-3px)}
.pplcard:hover .pplface{border-color:var(--lime)}
.pplpic{position:relative;display:block;line-height:0}
.pplface{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(212,242,74,.55);background:rgba(255,255,255,.06);transition:border-color .13s}
.pplface.ph{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:27px;
  color:var(--lime);text-transform:uppercase;letter-spacing:.02em;line-height:1}
/* only ever rendered when there is something to count */
.pplnum{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--lime);color:var(--ink);border:2px solid var(--blue);
  font-family:"Space Mono",monospace;font-size:11.5px;font-weight:700;line-height:1}
/* Somebody's birthday is the one thing on this roster worth interrupting for,
   so the cake is a big bare emoji with the same bob as the chip badge, not the
   small disc it used to be: from across the room you should be able to tell who
   the club owes a happy birthday to. */
/* top left, the one corner of a card with nothing in it: the count sits top
   right, the chip badge bottom right, and anything along the bottom crowds the
   name */
.pplcake{position:absolute;top:-14px;left:-12px;font-size:38px;line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));animation:pplbob 2.9s ease-in-out infinite}
/* and their face gets the solid lime ring everybody else only gets on hover */
.pplcard:has(.pplcake) .pplface{border-color:var(--lime)}
/* the club's verdict on someone, once a chip has five votes behind it. Rendered
   only when earned, so its presence is the whole message.
   Bare emoji, no disc behind it: drop-shadow rather than box-shadow, so the
   shadow follows the glyph instead of boxing an invisible square. */
.pplfloat{position:absolute;bottom:-8px;right:-6px;font-size:30px;line-height:1;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));animation:pplbob 2.9s ease-in-out infinite}
@keyframes pplbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* the badge still shows for anyone who asked the system to stop moving things,
   it just stops bobbing */
@media(prefers-reduced-motion:reduce){
  .pplfloat,.pmfloat,.pplcake{animation:none}
}
.pplname{font-weight:700;font-size:14px;line-height:1.25;color:#fff;letter-spacing:-.01em;word-break:break-word}
@media(min-width:1400px){
  .pplgrid{grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:32px 20px}
  .pplface{width:104px;height:104px}
  .pplface.ph{font-size:32px}
  .pplname{font-size:15px}
}
@media(max-width:640px){
  .pplgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:20px 12px}
  .pplface{width:68px;height:68px}
  .pplface.ph{font-size:22px}
  .pplname{font-size:13px}
  /* smaller circle, so pull the emoji back a little; the card can be carrying a
     count and a cake as well */
  .pplfloat{font-size:25px;bottom:-7px;right:-5px}
  .pplcake{font-size:30px;top:-11px;left:-9px}
}

/* a note an organizer or the member themselves already took down */
.atable tr.dim{opacity:.5}
.atable tr.dim b{font-weight:700}

/* ---------- the nice-notes pop-up ----------
   A fixed head, a scrolling wall, and the composer docked under it, so the
   close button and the place to write never walk off the screen on a long
   wall. */
/* One fixed size for every state. A panel that shrinks to a line of text when
   nobody has written yet, then jumps to full height on the next click, reads as
   broken; the empty message is centred in the space instead. */
/* overflow lives on .pmwrap, not here: the confetti mounts inside the dialog so
   it can paint over the whole screen from the top layer, and a clipped dialog
   would cut it off at the panel edge. .pmwrap does the corner rounding that
   overflow:hidden was here for. */
.pmodal{background:var(--blue-deep);color:#dbe8f0;border:1px solid rgba(212,242,74,.3);
  border-radius:18px;padding:0;margin:auto;overflow:visible;
  width:min(680px,calc(100% - 32px));height:min(88vh,780px);
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.pmodal::backdrop{background:rgba(0,10,18,.65);backdrop-filter:blur(6px)}
.pmwrap{display:flex;flex-direction:column;min-height:0;height:100%;
  overflow:hidden;border-radius:18px}
.pmhead{display:flex;align-items:center;gap:20px;flex:none;position:relative;
  padding:26px 22px 22px;border-bottom:1px solid rgba(255,255,255,.12)}
.pmfacewrap{position:relative;flex:none;display:block;line-height:0}
.pmfloat{position:absolute;bottom:-8px;right:-8px;font-size:44px;line-height:1;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.55));animation:pplbob 2.9s ease-in-out infinite}
.pmface{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none;display:block;
  border:3px solid var(--lime);background:rgba(255,255,255,.07)}
.pmface.ph{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:36px;
  color:var(--lime);text-transform:uppercase;letter-spacing:.02em}
.pmwho{flex:1;min-width:0;padding-right:34px}
.pmwho b{display:block;color:#fff;font-weight:900;font-size:clamp(21px,3.1vw,28px);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;word-break:break-word}
.pmwho i{display:block;margin-top:8px;font-style:normal;font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pmx{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;transition:.13s}
.pmx svg{width:17px;height:17px}
.pmx:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pmbody{flex:1;min-height:0;overflow-y:auto;padding:18px}
/* nothing written yet: sit the line in the middle rather than at the top of a
   tall empty box */
.pmbody.isempty{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 26px}
.pmbody.isempty .pmempty{margin:0}
.pmfoot{flex:none;display:flex;align-items:center;gap:10px;padding:14px 18px 16px;
  border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.14)}
.pmfoot .btn{flex:none}
.pmempty{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}
.pmnote{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.55)}
.pmbody .banner{margin-bottom:16px}

/* ---------- the tally board ----------
   The wall is the scoreboard now: one row per earned tag, biggest first.
   Warm and a little loud on purpose; this is the nicest thing on the site. */
.wishline{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:12px 16px;
  border:1px solid rgba(255,143,181,.5);border-radius:14px;
  background:rgba(255,143,181,.13);color:#ffd7e6;font-weight:700}
.wishline .cem{font-size:20px}
.boardhead{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 12px}
.tallyboard{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nchip.tally{gap:8px;padding:8px 14px;font-size:14px}
.nchip.tally .cem{font-size:16px}
.nchip.tally b{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--lime)}
.nchip.tally.top{border-color:rgba(212,242,74,.75);background:rgba(212,242,74,.16);
  font-size:15.5px;padding:10px 16px}
.nchip.tally.top .cem{font-size:19px}
.anonhint{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.35;
  color:rgba(255,255,255,.78);border:1px solid rgba(212,242,74,.35);background:rgba(212,242,74,.08);
  border-radius:999px;padding:6px 12px}
.anonhint .cem{font-size:15px;line-height:1}
.anonhint b{color:var(--lime);font-weight:700;white-space:nowrap}

/* ---------- the composer, docked under the wall ----------
   Reading what the club said about somebody is what makes you want to add to
   it, so the wall stays on screen while you write. Every chip is in the markup
   exactly once: the bar shows the first few, the tray shows all fifteen, and
   which one you are looking at is a CSS state rather than two lists to keep in
   step with each other. */
.pmcompose{flex:none;position:relative;padding:12px 18px 14px;
  border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2)}

/* ---------- the picker, folded ----------
   Fifteen chips were shouting over the board they exist to feed, so the
   picker sits low: folded, one row of chips still shows, enough to say what
   the section is, and the loud bar opens the rest. Open, the list is capped
   and scrolls within itself, so the board keeps the room however many tags
   the club one day has. It starts open only when the board is empty, because
   then giving the first tag IS the point; _notes_body.php decides that. A
   checkbox state like the propose form, so it works on person.php with JS
   off. */
.picktog{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pickbar{cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-family:"Space Mono",monospace;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--lime)}
.pickbar .cem{font-size:16px}
.picktog:focus-visible ~ .pickbar{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}
/* the arrow is the invitation, so it is a button-sized lime coin, not a
   caret: spun over when open, grown a little under the pointer */
.foldarrow{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--lime);color:var(--ink);
  box-shadow:0 2px 10px rgba(212,242,74,.35);transition:transform .25s ease}
.foldarrow svg{width:18px;height:18px}
.pmcompose:has(.picktog:checked) .foldarrow{transform:rotate(180deg)}
.pickbar:hover .foldarrow{transform:scale(1.1)}
.pmcompose:has(.picktog:checked) .pickbar:hover .foldarrow{transform:rotate(180deg) scale(1.1)}

/* folded shows exactly the first row: the next row starts past 32px at both
   chip sizes. Open is a hard cap, not a fit: past it the list scrolls. */
.pmcompose .chippick{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 10px;
  max-height:32px;overflow:hidden;transition:max-height .28s ease}
.pmcompose:has(.picktog:checked) .chippick{max-height:198px;overflow-y:auto;overscroll-behavior:contain}
.pmcompose .nchip.pick{font-size:12.5px;padding:6px 11px}

/* ---------- propose a tag ----------
   The picker's last chip opens a one-line form in place of the bar. A checkbox
   state, so it works on person.php with JS off; the chippick hides while the
   form is open. */
.proptog{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.propopen{border-style:dashed}
.proptog:focus-visible ~ .chippick .propopen{outline:2px solid var(--lime);outline-offset:2px}
.propform{display:none;align-items:center;gap:10px;margin:0}
.propform input[name="label"]{flex:1;min-width:0;height:44px;border-radius:12px;padding:11px 13px;
  font:inherit;font-size:15px;color:#fff;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.18)}
.propform input[name="label"]::placeholder{color:rgba(255,255,255,.42)}
.propform input[name="label"]:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent}
.propno{cursor:pointer;user-select:none;padding:6px 4px;font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.propno:hover{color:var(--lime)}
.pmcompose:has(.proptog:checked) .propform{display:flex}
.pmcompose:has(.proptog:checked) .pmbar,
.pmcompose:has(.proptog:checked) .chippick{display:none}

/* the hint rides right beside the button it is a promise about */
.pmbar{display:flex;align-items:center;justify-content:flex-end;gap:12px}
@media(max-width:640px){
  /* A blurred backdrop has to be recomputed under anything that moves over it,
     which on a phone means re-blurring the whole roster every frame of a pass.
     A plain dark wash costs nothing and looks near enough at this size. */
  .pmodal::backdrop{backdrop-filter:none;background:rgba(0,8,14,.84)}
  .pmodal{width:calc(100% - 20px);height:min(90vh,780px)}
  .pmbody,.pmhead{padding-left:15px;padding-right:15px}
  .pmfoot,.pmcompose{padding-left:15px;padding-right:15px}
  .pmhead{gap:15px;padding-top:20px;padding-bottom:18px}
  .pmface{width:82px;height:82px;border-width:2px}
  .pmface.ph{font-size:28px}
  .pmwho{padding-right:30px}
  /* all the chips stay on a phone too, just smaller, and the open cap drops
     to a third of the screen: the board above keeps its say and the Send
     button can never be pushed off the bottom */
  .pmcompose .nchip.pick{font-size:11.5px;padding:5px 10px}
  .pmcompose:has(.picktog:checked) .chippick{max-height:34vh}
  /* the promise loses its second sentence, not its row: the full wording
     stays in the title, and the hint keeps its seat beside the button */
  .anonmore{display:none}
  .pmbar{gap:10px}
  .propform{flex-wrap:wrap}
  .propform input[name="label"]{flex:1 1 100%}
}

/* ---------- birthday week ----------
   The panel keeps its shape and swaps its colours: frosting across the head
   with sprinkles in it, a drip along the bottom edge of the head, and a berry
   body underneath so nothing inside has to be restyled to stay readable. */
.pmodal.bday{border-color:var(--frost);box-shadow:0 30px 80px rgba(60,0,30,.6)}
.pmodal.bday .pmwrap,.perpanel.bday{background:var(--berry)}
.pmodal.bday .pmhead{border-bottom:0;color:var(--ink);
  background:linear-gradient(180deg,#ffd4e8 0%,var(--frost) 100%)}
/* sprinkles: three offset dot grids, so they land scattered rather than ruled */
.pmodal.bday .pmhead::before,.perpanel.bday .bdaybar::before{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(circle,#fff 0 2px,transparent 2px),
    radial-gradient(circle,#7ad3ff 0 2px,transparent 2px),
    radial-gradient(circle,#ffe45e 0 2px,transparent 2px);
  background-size:57px 43px,73px 51px,91px 61px;
  background-position:9px 7px,31px 23px,53px 11px}
/* the frosting drips onto the wall below it */
.pmodal.bday .pmhead::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background:radial-gradient(circle at 9px -2px,var(--frost) 0 9px,transparent 10px) repeat-x;
  background-size:24px 12px}
.pmodal.bday .pmwho b{color:var(--ink)}
.pmodal.bday .pmwho i{color:rgba(11,11,12,.62)}
.pmodal.bday .pmface{border-color:#fff;box-shadow:0 4px 14px rgba(70,0,35,.3)}
.pmodal.bday .pmx{background:rgba(255,255,255,.75);border-color:rgba(11,11,12,.2);color:var(--ink)}
.pmodal.bday .pmx:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* accents that were lime are frosting for the week */
.pmodal.bday .pmcompose,.perpanel.bday .pmcompose{border-top-color:var(--berry-line)}
.pmodal.bday .btn,.perpanel.bday .btn{background:var(--frost);border-color:var(--frost);color:var(--ink)}
.pmodal.bday .btn:hover,.perpanel.bday .btn:hover{background:#fff;border-color:#fff}
.pmodal.bday .nchip.pick:has(input:checked),
.perpanel.bday .nchip.pick:has(input:checked){background:var(--frost);border-color:var(--frost);color:var(--ink)}
.perpanel.bday{border:1px solid var(--frost);border-radius:18px;padding:18px}

/* the tag: above the wall, outside the scroll, and plainly not one of the chips */
.bdaybar{position:relative;flex:none;padding:14px 18px;
  background:linear-gradient(180deg,rgba(255,158,203,.16),rgba(255,158,203,.06));
  border-bottom:1px solid var(--berry-line)}
.bdayform{display:block}
.bdaytag{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;cursor:pointer;
  padding:13px 18px;border-radius:999px;border:0;font:inherit;font-size:15.5px;font-weight:900;
  letter-spacing:-.01em;color:var(--ink);background:var(--frost);
  box-shadow:0 6px 18px rgba(245,98,159,.35);transition:.13s}
.bdaytag:hover{background:#fff;transform:translateY(-1px)}
.bdaytag:active{transform:translateY(0)}
.bdaycake{font-size:22px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.bdaydone,.bdaymine{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
  font-size:14px;font-weight:700;line-height:1.4;color:var(--frost)}
/* a wish on the wall, so it reads as a wish and not a fifteenth skill */
.nchip.sm.bday{background:var(--frost);border-color:var(--frost);color:var(--ink)}
.perpanel.bday .bdaybar{border-radius:14px;border:1px solid var(--berry-line);margin-bottom:18px}

/* confetti, mounted inside the dialog so it clears the top layer */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.cbit{position:absolute;top:0;width:9px;height:14px;border-radius:2px;
  animation:cfall linear forwards}
.cbit.round{width:10px;height:10px;border-radius:50%}
.cbit.c0{background:var(--frost)}
.cbit.c1{background:#ffe45e}
.cbit.c2{background:#7ad3ff}
.cbit.c3{background:#fff}
.cbit.c4{background:var(--lime)}
@keyframes cfall{
  0%{transform:translate3d(0,-14vh,0) rotate(var(--rot,0deg));opacity:1}
  100%{transform:translate3d(var(--drift,0),112vh,0) rotate(calc(var(--rot,0deg) + 900deg));opacity:.85}
}
@media(prefers-reduced-motion:reduce){
  .confetti{display:none}
}
/* the drive-past: over the panel, across the whole screen, once. Inside the
   dialog for the same reason the confetti is, and above it, so a birthday and a
   cameo on the same panel do not fight. */
/* straight through the middle of the screen, big enough to be the thing you are
   looking at. The lane is top:50% and the centring lives in the keyframes,
   because the animation owns transform and would otherwise overwrite it. */
/* Parked off screen at the origin until members.js moves it: the pass is built
   from the measured viewport, because keyframes split time by percentages while
   the distances were in vw, so the same 2.6s covered a third of the pixels on a
   phone and the drive-by turned into a crawl. Sized on the axis it crosses:
   width for something going across, height for something coming down. */
.cameo{position:fixed;left:0;top:0;z-index:6;pointer-events:none;
  width:clamp(260px,46vw,620px);height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
  /* its own layer, so the pass is composited and does not compete with the
     panel that has just been swapped in behind it */
  will-change:transform;
  transform:translate(-200%,-200%)}
.cameo.down{width:auto;height:clamp(360px,64vh,760px)}
/* the peeker is a guest at the edge of the room, not the thing crossing it,
   so it stays smaller than either pass. Sized on its own width even though the
   side looks lie sideways: members.js works out the rotated box itself. */
.cameo.peek{width:clamp(340px,52vw,760px);height:auto}
@media(max-width:640px){
  /* 46vw of a phone is a toy. Both of them fill the screen instead, sized on
     the axis they cross: the width they travel along, or the width that leaves
     the fairy room to sway. */
  .cameo{width:125vw}
  .cameo.down{height:auto;width:84vw}
  .cameo.peek{width:96vw}
  /* No filter on the thing that moves. A blurred shadow on a picture this size
     is real work for a phone, and dropped frames are exactly what makes a pass
     look ragged. The picture keeps its size; the shadow goes. */
  .cameo{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .cameo{display:none}
}

/* the roster card of whoever is having the week */
.pplcard.bday .pplface{border-color:var(--frost)}
.pplcard.bday:hover .pplface{border-color:#fff}

/* ---------- one member's page: chips, wall, compose box ---------- */
.personpage .sl .stick{max-width:none}
.pershead .perface{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;
  margin:20px 0 18px;border:3px solid var(--lime);background:rgba(11,11,12,.05)}
.pershead .perface.ph{display:flex;align-items:center;justify-content:center;font-weight:900;
  font-size:42px;color:var(--blue);text-transform:uppercase}
.perbday{display:inline-block;margin-top:8px;font-weight:700;color:var(--blue)}
.perbday::before{content:"🎂 "}

/* a chip: the same pill whether it is a tally, a stamp on a note, or a choice */
.nchip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  border:1px solid rgba(212,242,74,.4);background:rgba(212,242,74,.09);color:#fff;
  padding:7px 13px;font-size:13.5px;font-weight:700;line-height:1.2}
/* name the emoji fonts explicitly: left to the body stack, Windows and Linux
   browsers often fall back to a glyph-less face and render a tofu box */
.cem,.pplcake,.perbday::before{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.nchip .cem{font-size:14px;line-height:1}
.nchip.sm{padding:5px 11px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}

.wallhead{margin-top:6px}

/* the same panel as a full page: there is no fixed height to dock against, so
   the composer simply sits at the end of the wall, as its own box */
.perpanel .pmcompose{border:1px solid rgba(212,242,74,.32);border-radius:16px;
  background:rgba(212,242,74,.06);padding:14px 16px 16px;margin-top:22px}
.perpanel .pmbody{padding:0}
/* the page column is narrower than the pop-up, and a one-line bar there squeezes
   the text box until its own placeholder clips: stack it, as the phone does */
.perpanel .pmbar{flex-wrap:wrap;gap:10px}

.notebox{border:1px solid rgba(212,242,74,.32);border-radius:16px;padding:20px 20px 22px;
  background:rgba(212,242,74,.06);margin-top:14px}
.boxlab{margin:0 0 11px;font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.chippick{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.nchip.pick{cursor:pointer;user-select:none;transition:.13s;
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.nchip.pick input{position:absolute;opacity:0;width:0;height:0}
.nchip.pick:hover{border-color:rgba(212,242,74,.6)}
.nchip.pick:has(input:checked){background:var(--lime);border-color:var(--lime);color:var(--ink)}
/* already spent on this person: still legible, plainly not on offer */
.nchip.pick.used{opacity:.4;cursor:default;border-style:dashed;background:transparent}
.nchip.pick.used:hover{border-color:rgba(255,255,255,.18)}
.boxsub{display:block;margin-top:4px;letter-spacing:.06em;color:rgba(255,255,255,.45);
  text-transform:none;font-size:11px}
.nchip.pick:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.notebox textarea{width:100%;border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;
  color:#fff;background:rgba(11,11,12,.28);border:1px solid rgba(255,255,255,.18);resize:vertical}
.notebox textarea::placeholder{color:rgba(255,255,255,.42)}
.notebox textarea:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent}
.notebox .rowbtn{margin-top:20px}
@media(max-width:640px){
  .pershead .perface{width:88px;height:88px;margin:16px 0 14px}
  .pershead .perface.ph{font-size:32px}
  .notebox{padding:16px 15px 18px}
}

/* ---------- profile photo nudge (member dashboard) ---------- */
.photonudge{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding:16px 18px;
  border:1px solid rgba(212,242,74,.42);border-radius:14px;background:rgba(212,242,74,.08)}
.photonudge .pnface{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px dashed rgba(212,242,74,.6);color:var(--lime)}
.photonudge .pnface svg{width:22px;height:22px}
.photonudge .pntext{flex:1;min-width:0}
.photonudge .pntext b{display:block;color:#fff;font-size:15px}
.photonudge .pntext p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.75)}
.photonudge .btn{flex:none}
@media (max-width:640px){
  .photonudge{flex-wrap:wrap;gap:12px}
  .photonudge .pntext{flex:1 1 100%;order:2}
  .photonudge .btn{order:3;width:100%;text-align:center}
}

/* ---------- current season panel (admin overview) ---------- */
.seasonnow{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.04)}
.seasonnow .k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.seasonnow .v{margin-top:5px;font-weight:800;font-size:19px;color:#fff}
.seasonnow .v .fee{color:var(--lime);margin-left:6px}
.seasonnow .meta{margin-top:6px;font-family:"Space Mono",monospace;font-size:10.5px;
  letter-spacing:.04em;color:rgba(255,255,255,.5)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;color:rgba(255,255,255,.65);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:#ffb4ac}
.linkbtn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* the quiet "change my mind" line: a form, so it needs putting back inline */
.altchoice{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.altchoice form{display:inline}

/* ---------- guest priority (members list, Guests filter) ---------- */
.gprio{margin-top:6px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.75);cursor:pointer;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.04em;padding:4px 10px;transition:.12s}
.gprio b{color:#fff;font-size:11.5px}
.gprio:hover{border-color:var(--lime);color:var(--lime)}
.gprio:hover b{color:var(--lime)}
.gprio:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.skpop.prio{width:206px}
.skpop-rows{display:grid;gap:6px}
.skpop-rows button{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:8px;
  color:#fff;padding:8px 11px;cursor:pointer;transition:.12s}
.skpop-rows button b{font-weight:800;font-size:14px}
.skpop-rows button i{font-style:normal;font-family:"Space Mono",monospace;font-size:10.5px;
  letter-spacing:.04em;color:rgba(255,255,255,.55)}
.skpop-rows button:hover{border-color:var(--lime);color:var(--lime)}
.skpop-rows button:hover i{color:var(--lime)}
.skpop-rows button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.skpop-rows button.cur{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.skpop-rows button.cur i{color:rgba(0,32,48,.7)}
.skpop-rows button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- sessions: collapsible "new session" form above the list ---------- */
.sessform{margin:2px 0 6px}
.sessform > summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-weight:800;font-size:14px;color:var(--ink);background:var(--lime);border-radius:999px;
  padding:11px 22px;transition:background .12s}
.sessform > summary::-webkit-details-marker{display:none}
.sessform > summary::before{content:"+";font-size:18px;line-height:1;margin-top:-1px}
.sessform > summary:hover{background:#e2ff5c}
.sessform[open] > summary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.sessform[open] > summary:hover{border-color:var(--lime)}
.sessform[open] > summary::before{content:"\00d7";font-size:20px}

/* ---------- roster: notify-on-add checkbox ---------- */
.addform{display:inline-flex;align-items:center;gap:12px}
.notifyck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.7);
  cursor:pointer;white-space:nowrap}
.notifyck input{accent-color:var(--lime);width:15px;height:15px;cursor:pointer}

/* ---------- test-session badge (admin sessions list) ---------- */
.testbadge{display:inline-block;font-family:"Space Mono",monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.12em;background:#ffb454;color:#3a2600;border-radius:5px;padding:2px 6px;vertical-align:1px;margin-left:6px}

/* ---------- bulk session selection (admin) ---------- */
.seltable .ckcol{width:34px;padding-right:0}
.bsel{width:18px;height:18px;accent-color:var(--lime);cursor:pointer}
.bulkchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}
.bulkchips .cl{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:2px}
.chip{font-family:"Space Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.12s}
.chip:hover{border-color:var(--lime);color:var(--lime)}
.bulkbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;
  background:var(--blue-deep);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 12px 10px 20px;
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.bulkbar[hidden]{display:none}
.bulkbar .cnt{font-size:14px;color:#fff;white-space:nowrap}
.bulkbar .cnt b{color:var(--lime)}
.clearsel{background:transparent;border:0;color:rgba(255,255,255,.6);font:inherit;font-size:13px;cursor:pointer;padding:6px 8px}
.clearsel:hover{color:#fff}
.bfield{margin:2px 0 8px}
.bfield.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mform .bfield input:disabled{opacity:.4;cursor:not-allowed}

/* ---------- session stats (member-facing night view) ---------- */
.gcard{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:14px;
  padding:16px 18px;margin-bottom:12px}
.gcard .ghead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gcard .gwhen{font-weight:800;color:#fff;font-size:15px}
.gcard .gdur{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--lime)}
.gcard .gwith{margin-top:10px;font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.gteam{display:flex;flex-wrap:wrap;gap:14px}
.gteam .tmate{display:flex;align-items:center;gap:8px}
.gteam .tmate img,.gteam .tmate .tph{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.gteam .tmate .tph{display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--lime);font-weight:800;font-size:11px}
.gteam .tmate span{color:#fff;font-size:13.5px}

/* ---------- welcome state: shown until an organizer puts you in a group ----
   A ladder of the three ways into the club, each marked with where this member
   actually stands, so the page answers "what now?" instead of going blank. */
.wel{margin:0 0 8px}
.wel h2{font-size:clamp(21px,2.6vw,26px);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0}
.wel .lead{margin:10px 0 0;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.6;max-width:56ch}
.ways{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.ways li{border-bottom:1px solid rgba(255,255,255,.14);padding:15px 0 16px;
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline}
.ways .w-when{font-weight:700;color:#fff;font-size:15.5px}
.ways .w-note{grid-column:1/-1;margin:2px 0 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}
.ways li.open .w-when{color:var(--lime)}
.wel .steps{margin-top:28px}
.wel .steps li{font-size:14.5px}
/* a branch for a different reader, not a step in the sequence above */
.wel-alt{margin:24px 0 0;padding-left:18px;border-left:2px solid rgba(255,255,255,.22);
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.wel-alt b{color:#fff}
.wel-foot{margin:24px 0 0;padding:14px 16px;border:1px solid rgba(212,242,74,.35);border-radius:12px;
  font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.wel-foot b{color:var(--lime)}
@media (max-width:560px){
  .ways li{grid-template-columns:1fr}
  .ways .gbadge{justify-self:start}
}

/* ---- admin sign-up claims ---- */
.claim,.cover{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.claim.conflict{border-color:rgba(255,196,0,.55)}
.chead{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:8px}
/* Portrait beside the head text. .chead keeps its own wrapping and takes the
   rest of the row (min-width:0 or a long email would push the face off), and
   gives up its margin to .cwho so the gap under the head stays the same with
   or without a photo. .sm is the compact variant for the list rows lower down,
   which pair this with the 34px .mface. */
/* 64px + 10px matches .crow i's 64px label column plus .crow's 10px gap, so the
   name starts on exactly the same edge as the Says/Roster values under it */
.cwho{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cwho>.chead{flex:1;min-width:0;margin-bottom:0}
.cwho.sm{gap:10px;margin-bottom:0}
.cface{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.cface.ph{display:inline-flex;align-items:center;justify-content:center;font-weight:800;
  font-size:22px;color:var(--lime);text-transform:uppercase;letter-spacing:.02em}
.cmail{opacity:.7;font-size:14px}
.cfar{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;
  background:rgba(255,120,90,.16);color:#ff9d85;border:1px solid rgba(255,120,90,.35)}
.cconf{margin-left:auto;font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.crow{display:flex;gap:10px;font-size:15px;line-height:1.5;margin:3px 0}
.crow i{font-style:normal;opacity:.6;min-width:64px;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.crow.warn{color:#ffc400}
.crow .muted,.cover .muted{opacity:.6}
.cacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cacts form{margin:0}
.calias{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
@media (max-width:640px){.cacts .btn,.cacts form{width:100%}.cacts .btn{text-align:center}.crow{flex-direction:column;gap:2px}.crow i{min-width:0}}

/* --- rating a game you played (session-stats cards) --- */
.gcard .gfb{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.gcard .gfbrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gcard .gfbask{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.gcard .gthumb{font-size:19px;line-height:1;background:transparent;border:1px solid var(--line);
  border-radius:11px;padding:6px 11px;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.gcard .gthumb:hover{opacity:1}
.gcard .gthumb.on{opacity:1;border-color:var(--lime);background:rgba(255,255,255,.08)}
.gcard .gfbthanks{font-size:12.5px;color:rgba(255,255,255,.72)}
.gcard .gfbpanel{margin-top:12px}
.gcard .gfbq{display:block;font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin:12px 0 8px}
.gcard .gfbchips{display:flex;flex-wrap:wrap;gap:8px}
.gcard .gfbchip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:13.5px;color:#fff;cursor:pointer;line-height:1.2}
.gcard .gfbchip input{position:absolute;opacity:0;width:0;height:0}
.gcard .gfbchip.on,.gcard .gfbchip:has(input:checked){border-color:var(--lime);background:rgba(255,255,255,.08)}
.gcard .gfbchip:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.gcard .gfbtext{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:11px;
  color:#fff;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
.gcard .gfbsave{margin-top:12px}
.gcard .gfbro{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  font-size:13px;color:rgba(255,255,255,.72)}
@media (max-width:520px){
  .gcard .gfbchip{font-size:13px;padding:8px 12px}
}

/* --- who won (game cards, during the night and for a day after) --- */
.gcard .gres{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.gcard .gresline{margin:0;font-size:14px;color:#fff;font-weight:700}
.gcard .gresline.warn{color:#ffc400;font-weight:600}
.gcard .gresmine{margin:4px 0 0;font-size:12.5px;color:rgba(255,255,255,.65)}
.gcard .gresacts{display:flex;align-items:center;gap:14px;margin-top:8px}
/* display:flex above would otherwise beat the browser's own hidden rule */
.gcard .gresacts[hidden]{display:none}
.gcard .gresinline{display:inline;margin:0}
.gcard .greslink{background:none;border:0;padding:0;cursor:pointer;font-family:"Space Mono",monospace;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.gcard .greslink:hover{color:#fff}
.gcard .gresform .gfbq:first-child{margin-top:0}
.gcard .gresbtns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gcard .gresbtns .btn.sm{min-width:84px;text-align:center}
.gcard .gresbtns .gfbthanks{color:#ffc400}

/* the dashboard's way into tonight.php, shown once you have checked in */
.srow .tonightlink{display:inline-block;margin:0 0 10px;padding:8px 14px;border:1px solid var(--lime);border-radius:999px;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime);text-decoration:none}
.srow .tonightlink:hover{background:rgba(212,242,74,.12)}
/* the dashboard's way into tonight.php once you have checked in; sits above the
   session list because the night's own card is gone by the time play starts */
.tonightbanner{display:block;margin:0 0 18px;padding:14px 18px;border:1px solid var(--lime);border-radius:14px;
  background:rgba(212,242,74,.08);color:#fff;text-decoration:none;font-size:14.5px;line-height:1.5}
.tonightbanner b{color:var(--lime);display:block;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.tonightbanner:hover{background:rgba(212,242,74,.14)}
/* The log-your-results nudge shares the tonight banner's shape but not its
   colour: tonight's banner is the urgent one during a session, and two lime
   bars stacked would flatten the difference. */
.tonightbanner.logresults{border-color:rgba(245,175,60,.55);background:rgba(245,175,60,.10)}
.tonightbanner.logresults b{color:#f5af3c}
.tonightbanner.logresults:hover{background:rgba(245,175,60,.17)}
/* tonight.php: the court you are on right now */
.gcard.oncourt{border-color:var(--lime);background:rgba(212,242,74,.07)}
.sub.waiting{margin-top:12px}

/* the partner the rater named, marked inside the lineup on the admin board */
.gfpart{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);border:1px solid var(--line);border-radius:999px;padding:1px 6px;margin-left:4px;
  white-space:nowrap;vertical-align:1px}

/* admin roster: the guest wait list in the sweep's order */
.gwl-intro{margin-bottom:12px;max-width:60ch}
.gwl-intro b{color:#fff}
.attrow.gwl .gwl-rank{flex:none;width:26px;text-align:center;font-family:"Space Mono",monospace;font-size:12px;color:rgba(255,255,255,.55)}
.attrow.gwl .gwl-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.attrow.gwl .gwl-who small{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.attrow.gwl i.gwl-in{padding:3px 8px;border-radius:999px;white-space:nowrap}
.attrow.gwl i.gwl-yes{background:rgba(200,255,90,.16);color:var(--lime)}
.attrow.gwl i.gwl-maybe{background:rgba(255,211,127,.18);color:#ffe3ae}
.attrow.gwl i.gwl-no{color:rgba(255,255,255,.45)}