/* Layout for the sign-in, password and account-management pages.
   ALL tokens come from /static/tokens.css — link it before this file.
   This file used to carry its own diverging :root; it no longer may
   (README_DESIGN_REVIEW.md §6, "Two token systems"). */
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:var(--fs-base); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
.hidden{display:none !important;}

/* centred single-card layout */
.shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--sh-2);padding:30px 30px 26px;width:100%;max-width:400px;
}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:22px;}
.brand-badge{
  width:38px;height:38px;border-radius:11px;background:#fff;
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand-badge img{display:block;}
.brand-title{font-weight:650;font-size:var(--fs-md);letter-spacing:-.01em;line-height:1.25;}
.brand-sub{font-size:var(--fs-sm);color:var(--ink-2);}
h1{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.02em;margin:0 0 4px;}
.sub{font-size:var(--fs-base);color:var(--ink-2);margin:0 0 20px;}

.field{margin-bottom:14px;}
/* In the hub, .field is an input; on these pages it is the wrapper around a
   label and an input, and the hub's control style drew a box around both. */
div.field{border:0;background:transparent;border-radius:0;box-shadow:none;}
label.lbl{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;display:block;margin-bottom:5px;}
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:var(--fs-base);background:var(--surface);outline:none;font-family:inherit;color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
input:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(28,28,26,.06);}
.hint{font-size:var(--fs-sm);color:var(--ink-3);margin-top:5px;}

button{font-family:inherit;cursor:pointer;border:none;}
.btn-primary{
  width:100%;background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:11px;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.01em;transition:background var(--t-fast);
}
.btn-primary:hover{background:#000;}
.btn-ghost{
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  padding:6px 11px;border-radius:9px;font-size:var(--fs-sm);font-weight:600;
}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{
  background:var(--red-soft);color:var(--red);border:1px solid #EDD3CC;
  padding:6px 11px;border-radius:9px;font-size:var(--fs-sm);font-weight:600;
}
.btn-danger:hover{background:#F3DED9;}

.alert{
  background:var(--red-soft);border:1px solid #EDD3CC;color:#8E3020;
  border-radius:var(--r-md);padding:11px 13px;font-size:var(--fs-base);margin-bottom:16px;
}
.notice{
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-deep);
  border-radius:var(--r-md);padding:11px 13px;font-size:var(--fs-base);margin-bottom:16px;
}
.warn{
  background:var(--amber-soft);border:1px solid #E8D6AE;color:var(--amber);
  border-radius:var(--r-md);padding:11px 13px;font-size:var(--fs-base);margin-bottom:16px;
}
.signup-go{margin-top:6px;}
.row + .btn-primary, .row ~ .btn-primary{margin-top:18px;}
.foot{margin-top:18px;font-size:var(--fs-sm);color:var(--ink-3);text-align:center;}

/* ---------- account management (wider page) ---------- */
.page{max-width:940px;margin:0 auto;padding:30px 24px 60px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:20px;margin-bottom:18px;
}
.panel h2{font-size:var(--fs-base);font-weight:650;margin:0 0 14px;letter-spacing:-.01em;}
table{width:100%;border-collapse:collapse;}
th{
  text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:650;padding:0 10px 9px;border-bottom:1px solid var(--line);
}
td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.nm{font-weight:600;font-size:var(--fs-base);}
.em{font-size:var(--fs-sm);color:var(--ink-2);}
.meta{font-size:var(--fs-sm);color:var(--ink-3);}
.tag{
  display:inline-flex;align-items:center;font-size:var(--fs-sm);font-weight:600;
  padding:2.5px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);
}
.tag.ink{background:var(--ink);color:var(--bg);}
.actions{white-space:nowrap;text-align:right;}
form.inline{display:inline;margin-left:6px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.row .field{flex:1;min-width:170px;margin-bottom:0;}
select{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
  font-size:var(--fs-base);background:var(--surface);font-family:inherit;color:var(--ink);
}

/* one-time password callout */
.cred{
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:18px;
}
.cred-h{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:650;}
.cred-p{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xl);font-weight:600;
  letter-spacing:.01em;margin:8px 0 6px;user-select:all;color:var(--ink);
}
.cred-n{font-size:var(--fs-sm);color:var(--ink-2);margin:0;max-width:52ch;line-height:1.55;}
/* A batch of invites: one block per player, each holding the message and that
   player's own link, ready to select and send. */
.batch-row{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:10px;
}
.batch-who{font-weight:650;font-size:var(--fs-base);}
.batch-em{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:8px;}
.batch-msg{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;font-family:inherit;font-size:var(--fs-sm);line-height:1.55;
  color:var(--ink-2);background:var(--surface-2);resize:vertical;cursor:pointer;
}
.batch-msg:focus{outline:2px solid var(--accent);outline-offset:1px;}

.cred-link{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-base);
  margin:8px 0 8px;user-select:all;color:var(--accent-deep);word-break:break-all;
  background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;
}

@media(max-width:640px){
  .page{padding:20px 16px 50px;}
  th:nth-child(3),td:nth-child(3){display:none;}
  .actions{text-align:left;}
  form.inline{margin:6px 6px 0 0;}
}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;}
@media (pointer:coarse){ .btn-primary,.btn-ghost,.btn-danger{min-height:44px;} input,select{min-height:44px;} }

/* ---- the door wears the name, not a university ----
   login, invite and change-password are the first three screens any coach
   who is not Eóin ever sees, and all three carried another programme's crest
   and the retired "Coaches Hub" wordmark. They wear Súil now: the pitch-eye,
   the wordmark whose fada is that same eye, and the one bilingual line the
   brand allows. */
.brand-badge.suil-mark{
  width:34px;height:34px;display:grid;place-items:center;
  background:none;border:0;color:var(--ink);
}
.brand-badge.suil-mark svg{width:30px;height:auto;display:block;}
.brand-title.suil-word{height:24px;color:var(--ink);}
.brand-title.suil-word svg{height:100%;width:auto;display:block;}
.brand-title.suil-word .fada{color:var(--accent-deep);}