/* LUMS Opportunities - shared theme for the auth pages.
   Mirrors the editorial look of index.html: Fraunces headings, Inter body,
   IBM Plex Mono labels, black on white, square corners, 2px black rules. */
:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --muted:#4A4A4A;
  --faint:#767676;
  --line:#000000;
  --hairline:#E6E6E6;
  --bad:#B32424;
  --good:#0B7A45;
  --radius:0px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:900; letter-spacing:-0.01em; line-height:1.08;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- nav / footer ---------- */
header.nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:2px solid var(--line);}
.nav .wrap{max-width:1180px; margin:0 auto; padding:0 32px; height:76px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:11px; font-family:'Fraunces',serif; font-weight:900; font-size:1.12rem;}
.brand .tile{width:26px; height:26px; border:2px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}
.brand .tile i{border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);}
.brand .tile i:nth-child(2),.brand .tile i:nth-child(4){border-right:0;}
.brand .tile i:nth-child(3),.brand .tile i:nth-child(4){border-bottom:0;}
.nav .navlink{font-family:'IBM Plex Mono',monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em;}
footer.foot{margin-top:auto; border-top:2px solid var(--line); background:var(--paper);}
.foot .wrap{max-width:1180px; margin:0 auto; padding:26px 32px; display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.foot .small{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--faint); letter-spacing:0.03em;}

/* ---------- auth layout ---------- */
main.auth{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:64px 20px 80px;}
.card{width:100%; max-width:440px; border:2px solid var(--line); padding:38px 34px 34px; background:var(--paper);}
.card.wide{max-width:560px;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--faint); margin-bottom:14px;}
.card h1{font-size:clamp(1.6rem,4vw,2.05rem); margin-bottom:10px;}
.card .lead{color:var(--muted); font-size:0.96rem; margin-bottom:26px; max-width:40ch;}

/* ---------- fields ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:7px;}
.field input, .field select{
  width:100%; padding:13px 14px; border:2px solid var(--ink); border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:1rem; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus{outline:2px solid var(--ink); outline-offset:1px;}
.field .hint{font-size:0.76rem; color:var(--faint); margin-top:6px;}
.email-wrap{display:flex; align-items:stretch;}
.email-wrap input{border-right:0;}
.email-wrap .suffix{display:flex; align-items:center; padding:0 13px; border:2px solid var(--ink); font-family:'IBM Plex Mono',monospace; font-size:0.86rem; background:#F4F4F4; white-space:nowrap;}
.phone-row{display:grid; grid-template-columns:150px 1fr; gap:10px;}
/* Native selects clip their own text; the dial code leads the option label so
   the part that matters survives the clip. */
.phone-row select{padding-right:8px; text-overflow:ellipsis;}
@media(max-width:420px){.phone-row{grid-template-columns:124px 1fr;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 22px;
  border:2px solid var(--ink); border-radius:var(--radius); font-family:'Inter',sans-serif; font-weight:600; font-size:0.95rem;
  background:var(--ink); color:var(--paper); cursor:pointer; transition:background .15s,color .15s,transform .15s;}
.btn:hover{background:var(--paper); color:var(--ink); transform:translateY(-1px);}
.btn[disabled]{opacity:.55; cursor:default; transform:none;}
.btn.ghost{background:var(--paper); color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}
.linkrow{margin-top:20px; text-align:center; font-size:0.88rem; color:var(--muted);}
.linkrow a{border-bottom:2px solid var(--ink); font-weight:600; padding-bottom:1px;}

/* ---------- messages ---------- */
.msg{border:2px solid var(--ink); padding:11px 13px; font-size:0.86rem; margin-bottom:18px; display:none;}
.msg.show{display:block;}
.msg.bad{border-color:var(--bad); color:var(--bad);}
.msg.good{border-color:var(--good); color:var(--good);}

/* ---------- code boxes ---------- */
.codes{display:flex; gap:10px; justify-content:space-between; margin:6px 0 8px;}
.codes input{width:100%; aspect-ratio:1/1; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:500;
  border:2px solid var(--ink); border-radius:var(--radius); background:var(--paper);}
.codes input:focus{outline:2px solid var(--ink); outline-offset:1px;}
.resend{margin-top:14px; text-align:center; font-size:0.84rem; color:var(--faint);}
.resend button{font-family:'IBM Plex Mono',monospace; font-size:0.8rem; background:none; border:0; border-bottom:2px solid var(--ink); color:var(--ink); cursor:pointer; padding:0 0 1px;}
.resend button[disabled]{border-color:var(--hairline); color:var(--faint); cursor:default;}

/* ---------- groups / list ---------- */
.you{font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--faint); margin-bottom:22px;}
.glist{display:flex; flex-direction:column; border-top:2px solid var(--line);}
.grow{display:flex; align-items:center; gap:16px; justify-content:space-between; padding:16px 2px; border-bottom:1px solid var(--hairline);}
.grow .gname{font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem;}
.grow .gsec{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--faint); margin-top:3px;}
.grow .join{flex:0 0 auto; padding:9px 16px; border:2px solid var(--ink); background:var(--ink); color:var(--paper); font-weight:600; font-size:0.84rem;}
.grow .join:hover{background:var(--paper); color:var(--ink);}
.grow .soon{flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--faint);}
.center-note{text-align:center; color:var(--faint); font-size:0.86rem; padding:22px 0;}
.spin{text-align:center; color:var(--faint); font-family:'IBM Plex Mono',monospace; font-size:0.8rem; padding:30px 0;}