/* ============================================================
   Crossites — Holy Cross School Alumni Association, Tadong
   Inter School Alumni Football Tournament 2026

   Design language: matchday programme / official team sheet.
   Palette sampled from the association crest and the club kit.
   Type: Bodoni Moda (display — echoes the CROSSITES wordmark)
         Archivo (interface, and jersey numerals)
   ============================================================ */

:root{
  --maroon:    #6B1E2E;
  --maroon-dk: #4E1421;
  --gold:      #C9A227;
  --green:     #1F3D2B;
  --slate:     #2C3E4C;
  --parchment: #F4EFE3;
  --paper:     #FFFFFF;
  --ink:       #1A1614;
  --ink-soft:  #5C554C;
  --rule:      #DFD6C4;
  --danger:    #A32218;
  --ok:        #1E6B34;

  --shadow-sm: 0 1px 2px rgba(26,22,20,.06);
  --shadow-md: 0 4px 16px rgba(26,22,20,.10);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:'Archivo', system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.55;
}

h1,h2,h3{
  font-family:'Bodoni Moda', 'Times New Roman', serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 .5rem;
}
h1{ font-size:clamp(1.75rem, 3.2vw, 2.5rem); }
h2{ font-size:1.35rem; }
h3{ font-size:1.1rem; }

a{ color:var(--maroon); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------------- Masthead ---------------- */

.site-header{
  background:var(--maroon);
  color:#fff;
  border-bottom:3px solid var(--gold);
}
.header-inner{
  max-width:1200px; margin:0 auto;
  padding:.85rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.85rem; color:#fff; }
.brand:hover{ text-decoration:none; }
.brand-crest{
  height:52px; width:52px; object-fit:contain;
  background:var(--parchment);
  border-radius:50%;
  padding:3px;
  border:2px solid var(--gold);
  flex-shrink:0;
}
.brand-title{
  font-family:'Bodoni Moda', serif;
  font-size:1.4rem; font-weight:600;
  letter-spacing:.06em;
  display:block; line-height:1.1;
}
.brand-sub{
  display:block; font-size:.72rem; color:var(--gold);
  letter-spacing:.14em; margin-top:.15rem;
}
.main-nav{ display:flex; gap:1.5rem; align-items:center; }
.main-nav a{
  color:#fff; font-size:.9rem; font-weight:500;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.main-nav a:hover{ border-color:var(--gold); text-decoration:none; }
.main-nav a.is-cta{
  background:var(--gold); color:var(--ink);
  padding:.45rem 1rem; border-radius:3px; border:none;
  font-weight:600;
}
.main-nav a.is-cta:hover{ filter:brightness(1.08); }

.site-main{ max-width:1200px; margin:0 auto; padding:2rem 1.5rem 4rem; }

.site-footer{
  border-top:1px solid var(--rule);
  padding:1.75rem 1.5rem;
  text-align:center; color:var(--ink-soft); font-size:.85rem;
}

/* ---------------- Page heading ---------------- */

.page-head{ margin-bottom:1.75rem; }
.page-head p{ color:var(--ink-soft); margin:.25rem 0 0; max-width:60ch; }

.crumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1rem; display:block; }

/* ---------------- Cards & forms ---------------- */

.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1.75rem;
  box-shadow:var(--shadow-sm);
}
.card--form{ max-width:660px; margin:0 auto; }

.field{ margin-bottom:1.25rem; }
.field label{
  display:block; font-weight:600; font-size:.9rem;
  margin-bottom:.35rem; color:var(--ink);
}
.hint{ font-size:.82rem; color:var(--ink-soft); margin:.35rem 0 0; }

input[type=text], input[type=date], input[type=number],
input[type=email], input[type=password], select{
  width:100%; padding:.65rem .75rem;
  border:1px solid var(--rule); border-radius:3px;
  background:#fff; color:var(--ink);
  font-family:inherit; font-size:.95rem;
  transition:border-color .12s ease;
}
input:focus, select:focus{ border-color:var(--maroon); outline:none; box-shadow:0 0 0 3px rgba(107,30,46,.10); }
input[type=file]{ font-size:.9rem; }

.btn{
  display:inline-block; border:none; border-radius:3px;
  background:var(--maroon); color:#fff;
  padding:.7rem 1.5rem;
  font-family:inherit; font-size:.95rem; font-weight:600;
  cursor:pointer; transition:filter .12s ease;
}
.btn:hover{ filter:brightness(1.12); text-decoration:none; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--maroon); border:1px solid var(--rule); }
.btn--sm{ padding:.4rem .85rem; font-size:.85rem; }

.notice{
  border-left:3px solid var(--gold);
  background:#fff; border-radius:3px;
  padding:.85rem 1rem; margin-bottom:1.25rem; font-size:.9rem;
}
.notice--error{ border-left-color:var(--danger); color:var(--danger); }
.notice--ok{ border-left-color:var(--ok); color:var(--ok); }
.notice ul{ margin:.25rem 0 0; padding-left:1.1rem; }
.error-text{ color:var(--danger); font-size:.85rem; margin-top:.35rem; }

/* ---------------- Split login ---------------- */

.auth{
  min-height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
}
.auth__brand{
  background:var(--maroon);
  background-image:radial-gradient(circle at 30% 25%, rgba(201,162,39,.16), transparent 60%);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:3rem 2rem; text-align:center;
}
.auth__crest{
  width:150px; height:auto; margin-bottom:1.5rem;
  background:var(--parchment); border-radius:50%;
  padding:8px; border:3px solid var(--gold);
}
.auth__brand h1{ font-size:2.1rem; letter-spacing:.08em; margin-bottom:.35rem; }
.auth__brand p{ color:var(--gold); font-size:.8rem; letter-spacing:.2em; margin:0; }
.auth__years{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-family:'Bodoni Moda', serif; font-size:1.05rem; color:rgba(255,255,255,.85);
}
.auth__form{
  display:flex; flex-direction:column; justify-content:center;
  padding:3rem 2rem; background:var(--parchment);
}
.auth__form-inner{ width:100%; max-width:360px; margin:0 auto; }
.auth__back{ display:block; margin-top:1.5rem; font-size:.85rem; color:var(--ink-soft); }

@media (max-width:820px){
  .auth{ grid-template-columns:1fr; min-height:auto; }
  .auth__brand{ padding:2.5rem 1.5rem; }
  .auth__crest{ width:100px; }
  .auth__form{ padding:2rem 1.5rem 3rem; }
}

/* ---------------- Team sheet layout ---------------- */

.sheet{
  display:grid;
  grid-template-columns:minmax(260px, 320px) 1fr;
  gap:2rem; align-items:start;
}
@media (max-width:900px){ .sheet{ grid-template-columns:1fr; } }

.squad{
  background:var(--paper);
  border:1px solid var(--rule); border-radius:4px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.squad__head{
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:baseline;
}
.squad__head h2{ margin:0; font-size:1.15rem; }
.squad__count{ font-size:.8rem; color:var(--ink-soft); }
.squad__list{ max-height:72vh; overflow-y:auto; }

.player-row{
  display:grid;
  grid-template-columns:34px 38px 1fr;
  align-items:center; gap:.7rem;
  padding:.6rem 1.25rem;
  border-bottom:1px solid var(--rule);
  cursor:grab;
}
.player-row:last-child{ border-bottom:none; }
.player-row:hover{ background:#FBF8F1; }
.player-row__num{
  font-weight:700; font-size:1rem;
  font-variant-numeric:tabular-nums;
  color:var(--maroon); text-align:right;
}
.player-row__face{
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; border:1px solid var(--rule);
}
.player-row__name{ font-weight:600; font-size:.92rem; line-height:1.25; }
.player-row__meta{ font-size:.76rem; color:var(--ink-soft); }

.bracket{
  display:inline-block; font-size:.68rem; font-weight:600;
  padding:.05rem .4rem; border-radius:2px; margin-left:.3rem;
  background:var(--parchment); color:var(--ink-soft);
  border:1px solid var(--rule);
}

/* ---------------- Pitch ---------------- */

.pitch-panel{ min-width:0; }
.pitch-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin-bottom:1rem; flex-wrap:wrap;
}
.status-pill{
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  padding:.3rem .75rem; border-radius:100px;
}
.status-pill--live{ background:#FBEFEF; color:var(--danger); }
.status-pill--frozen{ background:#E9F2EC; color:var(--ok); }

.pitch{
  position:relative;
  aspect-ratio:3/4;
  max-width:540px;
  margin-inline:auto;
  border-radius:4px;
  overflow:hidden;
  background:
    repeating-linear-gradient(to bottom,
      var(--green) 0 7%, #24462F 7% 14%);
  border:2px solid rgba(255,255,255,.45);
}
.pitch__markings{ position:absolute; inset:0; pointer-events:none; }
.pitch__markings::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:2px solid rgba(255,255,255,.35);
}
.pitch__markings::after{
  content:""; position:absolute; left:50%; top:50%;
  width:22%; aspect-ratio:1; transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.35); border-radius:50%;
}
.pitch__box{
  position:absolute; left:50%; transform:translateX(-50%);
  width:56%; height:14%;
  border:2px solid rgba(255,255,255,.35);
}
.pitch__box--top{ top:0; border-top:none; }
.pitch__box--bottom{ bottom:0; border-bottom:none; }

.slot{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  width:84px; text-align:center;
  transition:opacity .45s ease;
}
.slot__shirt{
  width:44px; height:44px; border-radius:4px;
  background:var(--maroon); color:#fff;
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.slot--empty .slot__shirt{
  background:rgba(255,255,255,.12); border-style:dashed;
  border-color:rgba(255,255,255,.5); font-size:.78rem; font-weight:600;
}
.slot__name{
  margin-top:.3rem; font-size:.72rem; font-weight:600;
  color:#fff; background:rgba(0,0,0,.55);
  padding:.1rem .4rem; border-radius:2px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.slot--empty .slot__name{ display:none; }
.slot--drop{ outline:2px dashed var(--gold); outline-offset:4px; }
.slot__remove{
  position:absolute; top:-8px; right:12px;
  width:20px; height:20px; border-radius:50%;
  background:var(--danger); color:#fff; border:2px solid #fff;
  font-size:.8rem; line-height:1; cursor:pointer; padding:0;
}

/* ---------------- Photo capture ---------------- */

.capture{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.capture__frame{
  width:200px; height:200px; border-radius:50%;
  border:2px dashed var(--rule);
  background:#FBF8F1; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.capture__frame video,
.capture__frame img{ width:100%; height:100%; object-fit:cover; }
.capture__placeholder{ color:var(--ink-soft); font-size:.82rem; padding:1rem; text-align:center; }
.capture__actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.file-btn{ cursor:pointer; }
.file-btn input{ display:none; }

/* ---------------- Tables (admin) ---------------- */

.table-wrap{ overflow-x:auto; background:var(--paper); border:1px solid var(--rule); border-radius:4px; }
table.data{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th{
  text-align:left; font-size:.78rem; font-weight:700;
  color:var(--ink-soft); letter-spacing:.04em;
  padding:.75rem 1rem; border-bottom:2px solid var(--rule);
  background:#FBF8F1; white-space:nowrap;
}
table.data td{ padding:.85rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; }
table.data tr:last-child td{ border-bottom:none; }

.tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  padding:.2rem .55rem; border-radius:2px; letter-spacing:.03em;
}
.tag--pending{ background:#FDF3E0; color:#8A5A00; }
.tag--approved{ background:#E9F2EC; color:var(--ok); }
.tag--rejected{ background:#FBEFEF; color:var(--danger); }

.quota{
  display:flex; gap:1.75rem; flex-wrap:wrap;
  padding:1rem 1.25rem; margin-bottom:1.5rem;
  background:var(--paper); border:1px solid var(--rule); border-radius:4px;
}
.quota__item .n{
  font-family:'Bodoni Moda', serif; font-size:1.6rem; font-weight:600;
  display:block; line-height:1;
}
.quota__item .n.is-over{ color:var(--danger); }
.quota__item .l{ font-size:.75rem; color:var(--ink-soft); }

.admin-nav{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.75rem;
  padding-bottom:1.25rem; border-bottom:1px solid var(--rule);
}
.admin-nav a{
  font-size:.87rem; font-weight:500; color:var(--ink-soft);
  padding:.4rem .8rem; border-radius:3px; border:1px solid transparent;
}
.admin-nav a:hover{ background:var(--paper); border-color:var(--rule); text-decoration:none; }
.admin-nav a.is-active{ background:var(--maroon); color:#fff; }

/* ---------------- Rules page ---------------- */

.rules-list{ counter-reset:rule; list-style:none; padding:0; margin:0; }
.rules-list li{
  counter-increment:rule;
  display:grid; grid-template-columns:2.2rem 1fr; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--rule);
}
.rules-list li:last-child{ border-bottom:none; }
.rules-list li::before{
  content:counter(rule);
  font-family:'Bodoni Moda', serif; font-size:1.3rem; font-weight:600;
  color:var(--gold); line-height:1.2;
}
.rules-list strong{ display:block; margin-bottom:.2rem; }
.rules-list ul{ margin:.4rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.92rem; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}