/* GymBrosUK design system
   Palette is locked to the client's brief: pure black and cool slate greys only.
   #1E293B / #334155 / #64748B, high-contrast white text, no warm accents.
   The look is soft panels and cards - not the hard brutalist edges of the first pass. */

:root{
  --black:#05070A;
  --bg:#080B0F;
  --bg-2:#0C1116;
  --panel:#111820;
  --panel-2:#151D26;
  --panel-hi:#1E293B;
  --line:rgba(148,163,184,.13);
  --line-2:rgba(148,163,184,.22);
  --slate-700:#334155;
  --slate-500:#64748B;
  --slate-400:#7C8AA0;
  --slate-300:#94A3B8;
  --slate-200:#CBD5E1;
  --white:#FFFFFF;

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-lift:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -30px rgba(0,0,0,1);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --gut:clamp(18px,4vw,52px);
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--white);
  font-family:var(--body);font-size:16px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.015em}
p{color:var(--slate-300)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate-500);
}
.muted{color:var(--slate-500)}
.dim{color:var(--slate-300)}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.panel-pad{padding:clamp(20px,2.4vw,30px)}
.panel-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:6px;
  padding:18px clamp(20px,2.4vw,26px);border-bottom:1px solid var(--line);
}
.panel-head h3{font-size:17px;letter-spacing:-.01em}
.panel-head .more{margin-left:auto;font-size:13.5px;color:var(--slate-400);font-weight:600}
.panel-head .more:hover{color:var(--white)}
.panel-body{padding:clamp(18px,2.2vw,26px)}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2vw,24px);transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,background .22s;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--panel-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15px;letter-spacing:.005em;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s,border-color .2s,color .2s,opacity .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--white);color:#0A0E13}
.btn-primary:hover{background:#E9EEF5}
.btn-ghost{border-color:var(--line-2);color:var(--white);background:rgba(148,163,184,.05)}
.btn-ghost:hover{border-color:var(--slate-500);background:rgba(148,163,184,.1)}
.btn-quiet{background:var(--panel-hi);color:var(--white)}
.btn-quiet:hover{background:#27364B}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* ---------- pills & meta ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:6px 12px;border-radius:999px;
  background:rgba(148,163,184,.1);border:1px solid var(--line);color:var(--slate-200);
}
.pill-quiet{background:transparent;color:var(--slate-500)}
.meta{font-size:13px;color:var(--slate-500)}

/* score chip - Crew Finder fit, never called a "match" */
.score{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:56px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--panel-hi);border:1px solid var(--line-2);
}
.score b{font-family:var(--display);font-size:19px;line-height:1;font-weight:800}
.score span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-400);margin-top:3px}

/* ---------- avatars ---------- */
.avatar{
  width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(145deg,var(--panel-hi),var(--slate-700));
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:15px;color:var(--slate-200);
  letter-spacing:.02em;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:64px;height:64px;font-size:20px}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-stack{display:flex}
.avatar-stack .avatar{margin-left:-11px;border:2px solid var(--panel)}
.avatar-stack .avatar:first-child{margin-left:0}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:200;
  background:rgba(8,11,15,.78);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar .inner{display:flex;align-items:center;gap:14px;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.brand .mark{
  width:36px;height:36px;border-radius:10px;background:var(--white);color:#080B0F;
  display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:-.03em;
}
.brand .name{font-size:17px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  padding:9px 15px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--slate-300);
  transition:color .18s,background .18s;
}
.nav a:hover{color:var(--white);background:rgba(148,163,184,.08)}
.nav a.active{color:var(--white);background:rgba(148,163,184,.13)}
.topbar .actions{display:flex;align-items:center;gap:10px;margin-left:14px}
.iconbtn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.iconbtn:hover{border-color:var(--line-2);background:var(--panel-2)}
.iconbtn .dot{
  position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--white);border:2px solid var(--panel);
}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--white);margin:4px 0;border-radius:2px}

/* ---------- app shell (sidebar pages) ---------- */
.shell{display:grid;grid-template-columns:250px 1fr;gap:clamp(16px,2vw,26px);padding:clamp(20px,2.6vw,32px) 0}
.side{position:sticky;top:92px;align-self:start}
.side nav{display:grid;gap:3px}
.side nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  font-size:14.5px;font-weight:600;color:var(--slate-300);transition:background .18s,color .18s;
}
.side nav a:hover{background:rgba(148,163,184,.07);color:var(--white)}
.side nav a.active{background:var(--panel-hi);color:var(--white)}
.side .sect{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-700);padding:16px 14px 8px;font-weight:800}
.side .ico{width:18px;height:18px;flex:none;opacity:.85}

.page-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:clamp(26px,3vw,36px)}
.page-head .sub{color:var(--slate-500);font-size:14.5px;margin-top:6px}
.page-head .right{margin-left:auto;display:flex;gap:10px}

.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-main{grid-template-columns:1.55fr .95fr;align-items:start}

/* A grid item will not shrink below the width of its own content unless it is
   told it may. Without this, one row of buttons that cannot wrap widens its
   column, widens the grid, and pushes the whole page off the side of the
   screen - which is exactly what a crew invite did. */
.shell>*,.grid>*{min-width:0}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs a{
  padding:11px 16px;font-size:14.5px;font-weight:700;color:var(--slate-500);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .18s,border-color .18s;
}
.tabs a:hover{color:var(--slate-200)}
.tabs a.active{color:var(--white);border-bottom-color:var(--white)}

/* ---------- lists ---------- */
/* A row is an avatar, some text, and whatever buttons belong to it. On a narrow
   column the buttons drop onto their own line rather than squeezing the text
   into one word per line - which is what happens if the text is simply allowed
   to shrink to nothing. flex-basis on .grow is what forces the wrap. */
.row{display:flex;align-items:center;gap:14px;row-gap:10px;flex-wrap:wrap;
     padding:14px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1 1 190px;min-width:0}
.row .name{font-weight:700;font-size:15px}
.row .sub{font-size:13px;color:var(--slate-500);margin-top:2px}

/* ---------- tables (The Smith) ---------- */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-500);font-weight:800;padding:0 14px 12px;
}
.table td{padding:13px 14px;border-top:1px solid var(--line);color:var(--slate-200)}
.table tr:hover td{background:rgba(148,163,184,.04)}
.table td.num{font-variant-numeric:tabular-nums;color:var(--white);font-weight:600}

/* ---------- forms ---------- */
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:var(--slate-300)}
.field input,.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 14px;font-size:15px;color:var(--white);width:100%;
  transition:border-color .2s,background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--slate-500);background:var(--panel);
}
.field .hint{font-size:12.5px;color:var(--slate-500)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- empty states (cold start) ---------- */
.empty{
  text-align:center;padding:clamp(32px,5vw,56px) 24px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:rgba(148,163,184,.03);
}
.empty h3{margin-bottom:10px}
.empty p{max-width:46ch;margin:0 auto 20px;font-size:15px}

/* ---------- stats ---------- */
.stat-tile{padding:20px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.stat-tile .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500);font-weight:800}
.stat-tile .v{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:800;margin-top:8px;letter-spacing:-.03em;white-space:nowrap}
.stat-tile .d{font-size:13px;color:var(--slate-500);margin-top:4px}

/* ---------- reveal on scroll (the "modern" movement) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(48px,6vw,84px);padding:52px 0 40px}
.foot .cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
.foot h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500);margin-bottom:16px;font-family:var(--body);font-weight:800}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a{color:var(--slate-300);font-size:14.5px}
.foot a:hover{color:var(--white)}
.foot .bot{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--slate-700)}
.foot .bot .r{margin-left:auto}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .g-main,.g-4{grid-template-columns:repeat(2,1fr)}
  .shell{grid-template-columns:1fr}
  .side{position:static;display:none}
  .side.open{display:block}
}
/* Was 760px. Between 760 and 900 the five nav links, the logo and the header
   buttons together are wider than the screen, which pushed every page sideways.
   Measured, not guessed - at 820px the document was 828px wide. */
@media(max-width:900px){
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:70px;left:0;right:0;padding:14px var(--gut) 20px;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(0,0,0,.95);
  }
  .burger{display:block}
  .topbar .actions{margin-left:0}
  .g-2,.g-3,.g-4,.g-main,.field-row{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
}
/* On a phone the two header buttons don't both fit - Sign in moves into the burger
   menu so "Join the Brotherhood" is never clipped off the edge of the screen. */
@media(max-width:520px){
  .topbar .actions .signin-btn{display:none}
  /* Signed in, the same problem: the bell, the messages icon and a Dashboard
     button do not all fit next to the logo. Dashboard is the first item in the
     side menu anyway, so it is the one that goes. */
  .topbar .actions .dash-btn{display:none}
  .topbar .actions .btn-primary{white-space:nowrap;font-size:12.5px;padding:9px 14px}
  .topbar .inner{gap:10px}
  .nav.open .signin-mob{display:block;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
}
/* Below this the wordmark and "Join the Brotherhood" still fight for the same
   30 pixels on a small Android. The mark keeps the brand; the words go.
   Measured at 360px, where the page was 390px wide before this. */
@media(max-width:430px){
  .brand .name{font-size:15px}
  .brand{gap:8px}
  .topbar .actions .btn-primary{font-size:12px;padding:9px 12px}
  .topbar .inner{gap:8px}
}
/* An old 320px handset. Nothing shrinks far enough, so the wordmark drops and
   the GB mark carries the brand on its own. */
@media(max-width:340px){
  .brand .name{display:none}
}
.signin-mob{display:none}

/* ---------------------------------------------------------------------------
   Flash messages. Every action that writes says so - a button that looks like
   it worked but didn't is worse than one that plainly failed.
   Kept monochrome like the rest; errors read louder through weight and a rule,
   not through colour, because the palette has no red in it.
--------------------------------------------------------------------------- */
.flashes{position:sticky;top:0;z-index:60;padding:12px 0 0}
.flash{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--panel-2);border:1px solid var(--line-2);border-left:3px solid var(--slate-500);
  border-radius:var(--r);padding:13px 16px;margin-bottom:10px;
  font-size:14.5px;line-height:1.5;color:var(--slate-100);
  box-shadow:var(--shadow);
  animation:flash-in .28s cubic-bezier(.2,.7,.3,1) both;
}
.flash span{flex:1;min-width:0}
.flash-success{border-left-color:var(--white)}
.flash-error{border-left-color:var(--white);font-weight:600}
.flash-x{
  background:none;border:0;color:var(--slate-500);font-size:20px;line-height:1;
  cursor:pointer;padding:0 2px;transition:color .15s;
}
.flash-x:hover{color:var(--white)}
@keyframes flash-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.flash{animation:none}}

/* An inline form should not knock the layout about - it is only there to carry
   the CSRF token and the button that was already in the design. */
form.inline{display:contents}

/* Label that only a screen reader needs to hear. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}