/* ==========================================================================
   Perth Futsal Collective — components
   ========================================================================== */

/* -------------------------------------------------------------- header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(28, 15, 49, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.25s, border-color 0.25s;
}

.site-head.is-scrolled {
  background: rgba(21, 8, 38, 0.92);
  border-bottom-color: var(--line-strong);
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}

.brand__mark { width: 2.1rem; height: auto; }

.brand__text {
  display: grid;
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand__text strong { font-size: 1.02rem; font-weight: 700; }
.brand__text em {
  font-style: normal;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Fixtures, ladders and teams behind one heading: they are the three ways of
   asking the same question — what is on and how did it go. */
.navdrop { position: relative; }

.navdrop__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.navdrop__button:hover { color: var(--ink); background: var(--surface); }
.navdrop.is-open .navdrop__button,
.navdrop.has-active .navdrop__button { color: var(--ink); background: var(--surface-hi); }
.navdrop__caret { font-size: 0.6em; }

.navdrop__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  min-width: 11rem;
  padding: 0.3rem;
  display: none;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--navy-700);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.navdrop.is-open .navdrop__menu { display: grid; gap: 0.1rem; }

.navdrop__menu a {
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.navdrop__menu a:hover { color: var(--ink); background: var(--surface-hi); }
.navdrop__menu a.is-active { color: var(--cream); background: var(--crimson-600); }

/* On a phone the groups keep their names: Team hub and Join in sit in the
   stacked menu as tap-to-open rows, same shape as the desktop dropdowns.
   The group holding the page you are on starts open, so the current section
   is never hidden behind its own button. */
@media (max-width: 940px) {
  .navdrop { width: 100%; }
  .navdrop__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .navdrop__menu {
    position: static;
    padding: 0 0 0.25rem 0.9rem;
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
  }
  .navdrop.has-active .navdrop__menu { display: grid; gap: 0.1rem; }
}

.site-nav__links > a, .site-nav > a,
.site-nav__account > a:not(.btn) {
  position: relative;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}

.site-nav__links > a:hover, .site-nav > a:hover,
.site-nav__account > a:not(.btn):hover { color: var(--ink); background: var(--surface); }

.site-nav__links > a.is-active, .site-nav > a.is-active,
.site-nav__account > a:not(.btn).is-active {
  color: var(--ink);
  background: var(--surface-hi);
}

.site-nav__links > a.is-active::after, .site-nav > a.is-active::after,
.site-nav__account > a:not(.btn).is-active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  background: var(--crimson-500);
  border-radius: 2px;
}

.site-nav__account {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.22s, opacity 0.22s;
}
.nav-toggle__bar { top: 50%; margin-top: -1px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after { content: ""; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; order: 3; }
  .site-nav {
    order: 4;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0.5rem 0 1rem;
    gap: 0.15rem;
  }
  .site-head__inner { flex-wrap: wrap; }
  .site-nav.is-open { display: flex; }
  .site-nav__links { flex-direction: column; align-items: stretch; width: 100%;
                     gap: 0.15rem; }
  .site-nav a { padding: 0.8rem 0.9rem; font-size: 1rem; }
  .site-nav__links > a.is-active::after, .site-nav > a.is-active::after { display: none; }
  .site-nav__account {
    margin: 0.5rem 0 0;
    padding: 0.75rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
}

/* The same folded menu on a wider screen, whenever the full bar doesn't fit.
   Signed in as an admin the bar carries Dashboard, Match day, Admin, a name
   and Sign out, and needs far more room than a visitor's - so no one width
   can say when to fold. app.js measures and sets .is-compact instead;
   without it the end of the bar sat past the edge of the window, out of
   reach. Kept in step with the two 940px blocks above. */
.site-head.is-compact .nav-toggle { display: block; order: 3; }
.site-head.is-compact .site-head__inner { flex-wrap: wrap; }
.site-head.is-compact .site-nav {
  order: 4;
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0.5rem 0 1rem;
  gap: 0.15rem;
}
.site-head.is-compact .site-nav.is-open { display: flex; }
.site-head.is-compact .site-nav__links { flex-direction: column;
  align-items: stretch; width: 100%; gap: 0.15rem; }
.site-head.is-compact .site-nav a { padding: 0.8rem 0.9rem; font-size: 1rem; }
.site-head.is-compact .site-nav a.is-active::after { display: none; }
.site-head.is-compact .site-nav__account {
  margin: 0.5rem 0 0;
  padding: 0.75rem 0 0;
  border-left: 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.site-head.is-compact .navdrop { width: 100%; }
.site-head.is-compact .navdrop__button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.site-head.is-compact .navdrop__menu {
  position: static;
  padding: 0 0 0.25rem 0.9rem;
  border: 0;
  background: none;
  box-shadow: none;
  min-width: 0;
}
.site-head.is-compact .navdrop.has-active .navdrop__menu { display: grid; gap: 0.1rem; }

/* A signed-in player keeps every link on the bar - the public pages and
   their own side by side - so the links sit a little closer together. */
@media (min-width: 941px) {
  .site-head.is-member:not(.is-compact) .site-nav__links > a,
  .site-head.is-member:not(.is-compact) .site-nav > a,
  .site-head.is-member:not(.is-compact) .site-nav__account > a:not(.btn),
  .site-head.is-member:not(.is-compact) .navdrop__button {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .site-head.is-member:not(.is-compact) .site-nav__links > a.is-active::after,
  .site-head.is-member:not(.is-compact) .site-nav > a.is-active::after,
  .site-head.is-member:not(.is-compact) .site-nav__account > a:not(.btn).is-active::after {
    left: 0.6rem;
    right: 0.6rem;
  }
  .site-head.is-member:not(.is-compact) .site-nav,
  .site-head.is-member:not(.is-compact) .site-nav__links { gap: 0.15rem; }
}

/* Referees and admins: the bar has a job to do - fixtures, ladders,
   Dashboard, Match day, Admin and who you are. The rest of the public pages -
   the season, joining in, the FAQ, contact - go behind the Menu button, which
   opens them as a card under the header. Players keep every link on the bar
   instead. On a phone the whole lot is already behind that button, so this
   only applies once there is room for a bar at all. */
@media (min-width: 941px) {
  .site-head.is-staff:not(.is-compact) .nav-toggle { display: block; order: 2; }
  .site-head.is-staff:not(.is-compact) .site-nav__links {
    position: absolute;
    top: calc(100% - 0.35rem);
    right: 1.25rem;
    z-index: 70;
    display: none;
    flex-direction: column;
    align-items: stretch;
    min-width: 13rem;
    padding: 0.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.9rem;
    background: var(--navy-700);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .site-head.is-staff:not(.is-compact) .site-nav.is-open .site-nav__links {
    display: flex;
  }
  .site-head.is-staff:not(.is-compact) .site-nav__links > a.is-active::after {
    display: none;
  }
  /* Inside the card the two groups open in place, as they do on a phone. */
  .site-head.is-staff:not(.is-compact) .navdrop { width: 100%; }
  .site-head.is-staff:not(.is-compact) .navdrop__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  .site-head.is-staff:not(.is-compact) .navdrop__menu {
    position: static;
    padding: 0 0 0.25rem 0.9rem;
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
  }
  .site-head.is-staff:not(.is-compact) .site-nav__account {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

/* -------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--surface-hi);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.14s, filter 0.18s, background 0.18s, border-color 0.18s;
}

.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--crimson-600);
  --btn-fg: var(--cream);
  --btn-bd: var(--crimson-500);
  box-shadow: 0 10px 30px -14px var(--crimson-600);
}

.btn--light {
  --btn-bg: var(--blush);
  --btn-fg: var(--navy-900);
  --btn-bd: var(--blush);
}

.btn--ghost { --btn-bg: transparent; }

.btn--danger {
  --btn-bg: transparent;
  --btn-fg: var(--danger);
  --btn-bd: rgba(242, 88, 95, 0.5);
}

.btn--go {
  --btn-bg: var(--live);
  --btn-fg: #05261a;
  --btn-bd: var(--live);
}

.btn--sm { padding: 0.45rem 0.85rem; font-size: 0.8rem; }
.btn--lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* -------------------------------------------------------------- surfaces */

.card {
  background: linear-gradient(160deg, rgba(252, 227, 222, 0.075), rgba(252, 227, 222, 0.025));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.75rem);
  box-shadow: var(--shadow);
}

.card--flat { box-shadow: none; background: var(--surface); }

.card--link {
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.card--link:hover {
  border-color: var(--crimson-500);
  transform: translateY(-3px);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card__title {
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.panel {
  background: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.panel__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The whole panel's worth gone at once - sat against its heading, the same
   ✕ as the one on each row but standing for all of them. */
.panel__x {
  margin-left: 0.4rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}
.panel__x:hover { color: var(--danger); }

.panel__body { padding: 1.25rem; }

/* An admin is looking at a season the site is not showing. Loud on purpose:
   next season's empty fixture list reads as a broken site otherwise. */
.seasonbar {
  background: var(--crimson-600);
  color: var(--cream);
  font-size: 0.86rem;
}
/* The strip runs the full width so it reads as a banner, but its text and
   button sit in the same column as the header and the page below - a fixed
   padding here left them further in from the edge than everything else on
   a wide screen, where the shell is centred with room either side of it. */
.seasonbar__shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.6rem;
}
.seasonbar strong { letter-spacing: 0.02em; }
.seasonbar .btn {
  --btn-fg: var(--cream);
  --btn-bd: rgba(255, 255, 255, 0.5);
  margin-left: auto;
}

/* -------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--paid   { color: var(--live);    border-color: rgba(52, 211, 153, 0.4);  background: rgba(52, 211, 153, 0.1); }
.badge--due    { color: var(--warn);    border-color: rgba(245, 184, 65, 0.4);  background: rgba(245, 184, 65, 0.1); }
.badge--unpaid { color: var(--danger);  border-color: rgba(242, 88, 95, 0.42);  background: rgba(242, 88, 95, 0.12); }
.badge--live   { color: var(--live);    border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.12); }
.badge--crimson{ color: var(--blush);   border-color: var(--crimson-500);       background: rgba(168, 59, 75, 0.35); }

.badge--live .dot { animation: pulse 1.6s ease-in-out infinite; }

.dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* form guide — W/D/L/F dots on the ladder */
.form-run { display: inline-flex; gap: 0.22rem; }
.form-run span {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: 0.66rem;
  font-weight: 800;
  background: var(--surface-hi);
  color: var(--ink-soft);
}
.form-run .w { background: rgba(52, 211, 153, 0.22); color: var(--live); }
.form-run .d { background: rgba(252, 227, 222, 0.14); color: var(--ink); }
.form-run .l { background: rgba(242, 88, 95, 0.18); color: var(--danger); }
.form-run .f { background: rgba(242, 88, 95, 0.34); color: #ffd9db; }
.form-run .b { background: rgba(252, 227, 222, 0.08); color: var(--ink-faint, var(--ink)); }

/* -------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

.tabs button {
  padding: 0.5rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}

.tabs button:hover { color: var(--ink); }

/* The two doors on a team's own page. Links rather than tabs - nothing is
   "selected" here, both go somewhere - so they wear the strip's shape and
   fill in on hover. */
.team-doors a {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.team-doors a:hover { background: var(--crimson-600); color: var(--cream); }
/* The page you are already on, marked the way a chosen tab is. */
.team-doors a.is-here {
  background: var(--crimson-600);
  color: var(--cream);
  cursor: default;
}

.tabs button[aria-selected="true"] {
  background: var(--crimson-600);
  color: var(--cream);
}

.select-inline {
  padding: 0.5rem 2.2rem 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--navy-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23fce3de'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 0.65rem;
  background-blend-mode: normal;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

/* -------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 34rem;
}

table.data th,
table.data td {
  padding: 0.72rem 0.7rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.data th {
  position: sticky;
  top: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--navy-900);
  border-bottom-color: var(--line-strong);
}

table.data th:first-child,
table.data td:first-child { text-align: center; padding-left: 1rem; width: 3rem; }

table.data th:nth-child(2),
table.data td:nth-child(2) { text-align: left; white-space: normal; width: 100%; }

/* A ladder on a phone: the columns are #, team, played, won, drawn, lost,
   byes, goals for, goals against, difference, points, form - which is three
   screens wide, and points ends up off the right where nobody sees it. The
   goal columns and the form guide fold away under 620px, leaving the table
   that answers "where are we": played, the three results, byes and points.
   Turning the phone sideways brings the rest back. */
@media (max-width: 620px) {
  table.data th:nth-child(n + 8):nth-child(-n + 10),
  table.data td:nth-child(n + 8):nth-child(-n + 10),
  table.data th:last-child,
  table.data td:last-child { display: none; }
  /* The 34rem floor is there so a full ladder keeps its columns apart on a
     laptop; with five of them folded away it is what pushes points off the
     screen. */
  table.data { width: 100%; min-width: 0; font-size: 0.9rem; }
  table.data th, table.data td { padding-inline: 0.3rem; }
  table.data th:first-child,
  table.data td:first-child { width: 2.2rem; padding-left: 0.5rem; }
  /* The name column stops demanding the whole width, so the numbers it is
     there to explain stay on the screen beside it. */
  table.data th:nth-child(2),
  table.data td:nth-child(2) { width: auto; }
}

table.data tbody tr { transition: background 0.15s; }
table.data tbody tr:hover { background: var(--surface); }
table.data tbody tr:last-child td { border-bottom: 0; }

table.data td.strong { font-weight: 700; color: var(--cream); }

.pos {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-sm);
  background: var(--surface-hi);
  font-size: 0.8rem;
  font-weight: 700;
}
.pos--top { background: var(--crimson-600); color: var(--cream); }
.pos--podium { background: rgba(168, 59, 75, 0.4); }

.team-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 600;
}
.team-cell:hover { color: var(--crimson-400); }

.team-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--crimson-500);
  flex: none;
}

/* -------------------------------------------------------------- forms */

/* Packed to the top, so a box beside one with a hint under it stays the
   same height instead of stretching to fill the row. */
.field { display: grid; gap: 0.4rem; margin-bottom: 0.95rem; align-content: start; }

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: rgba(21, 8, 38, 0.6);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 0.18s, background 0.18s;
}

.field textarea { resize: vertical; min-height: 6rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--crimson-500);
  background: rgba(21, 8, 38, 0.85);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23fce3de' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.7rem;
  padding-right: 2.4rem;
}

.field-row {
  display: grid;
  gap: 0 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.field-error {
  font-size: 0.8rem;
  color: var(--danger);
  text-transform: none;
  letter-spacing: 0;
}

.form-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
  min-height: 1.2rem;
}
.form-note.is-good { color: var(--live); }
.form-note.is-bad { color: var(--danger); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0;
  cursor: pointer;
}
.check input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--crimson-600); flex: none; }
.check span { font-size: 0.9rem; color: var(--ink-soft); }

.fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.fieldset legend {
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson-400);
  margin-bottom: 0.7rem;
}

/* -------------------------------------------------------------- feedback */

.empty {
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.5rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-soft);
}
.empty strong { display: block; color: var(--ink); font-size: var(--step-1); margin-bottom: 0.4rem; }

.loading {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 5rem 1rem;
  color: var(--ink-faint);
}

.spinner {
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--line-strong);
  border-top-color: var(--crimson-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: grid;
  gap: 0.6rem;
  width: min(24rem, calc(100vw - 2rem));
}

.toast {
  padding: 0.85rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  animation: toast-in 0.25s ease-out;
}
.toast--good { border-left: 3px solid var(--live); }
.toast--bad  { border-left: 3px solid var(--danger); }
.toast--info { border-left: 3px solid var(--crimson-500); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

.notice {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.9rem;
}
.notice--warn { border-color: rgba(245, 184, 65, 0.45); background: rgba(245, 184, 65, 0.09); }
.notice--bad  { border-color: rgba(242, 88, 95, 0.45);  background: rgba(242, 88, 95, 0.1); }
.notice--good { border-color: rgba(52, 211, 153, 0.4);  background: rgba(52, 211, 153, 0.09); }

/* -------------------------------------------------------------- footer */

.site-foot {
  margin-top: auto;
  background: var(--navy-950);
  border-top: 1px solid var(--line);
  padding-top: var(--pad-block);
}

.foot-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.foot-contact__title {
  font-size: var(--step-3);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.foot-contact__lead { color: var(--ink-soft); max-width: 42ch; }

.contact-details {
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: 2.25rem;
}

.contact-details dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson-400);
  margin-bottom: 0.35rem;
}

.contact-details dd { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.contact-details a { color: var(--ink); text-decoration-color: var(--crimson-500); text-underline-offset: 3px; }
/* Who answers the phone, under the number itself. */
.contact-details__who { font-size: 0.86rem; color: var(--ink-faint); }

.foot-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.foot-bar__mark { width: 1.5rem; opacity: 0.7; }
.foot-bar p { margin-right: auto; }
.foot-bar__links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.foot-bar__links a { text-decoration: none; }
.foot-bar__links a:hover { color: var(--ink); }

/* A mistake, not a state: one referee on two games at the same moment. */
.badge--danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* -------------------------------------------------- capture for socials */

.social-btn svg { display: block; }

/* Capture mode: every taggable section becomes a target. */
body.is-capturing [data-social] {
  outline: 3px dashed var(--crimson-500);
  outline-offset: 4px;
  cursor: pointer;
}
body.is-capturing [data-social]:hover { outline-style: solid; }
body.is-capturing .social-picked {
  outline: 4px solid var(--crimson-400);
  outline-offset: 4px;
}

.social-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--ink-800, #241546);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 220;
  font-size: 0.9rem;
}

.social-preview {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 6, 24, 0.8);
  z-index: 230;
}
.social-preview__frame {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: center;
  max-height: 96vh;
}
.social-preview__img {
  display: block;
  max-height: 82vh;
  max-width: min(92vw, 34rem);
  height: auto;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.social-preview__actions { display: flex; gap: 0.75rem; }

/* ------------------------------------------------------- round paging */

/* Every round in the season, as a row of numbers. Arrows meant stepping one
   week at a time to reach round 3 from round 17; a grid of numbers means
   tapping the one you want. The round on show is filled in, rounds already
   played are dimmed so the season's shape is readable at a glance. */
/* One line, always: the row measures itself and drops whatever does not fit
   rather than wrapping onto a second line. */
.roundpicker {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.roundpicker__label, .roundpicker__date, .roundpicker__step,
.roundpicker__round { flex: 0 0 auto; }
.roundpicker__label {
  margin-right: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.roundpicker__round {
  min-width: 2.5rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.roundpicker__round:hover { background: var(--surface-hi); border-color: var(--line-strong); }
.roundpicker__round.is-played { color: var(--ink-faint); }
.roundpicker__round[aria-current="true"] {
  background: var(--crimson-600);
  border-color: transparent;
  color: var(--cream);
}
/* The arrows either side: the same size as a round, quieter, and out of the
   way when there is nothing further to go to. */
.roundpicker__step {
  min-width: 2rem;
  padding: 0.42rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s;
}
.roundpicker__step:hover:not([disabled]) {
  background: var(--surface-hi);
  border-color: var(--line-strong);
  color: var(--ink);
}
.roundpicker__step[disabled] { opacity: 0.3; cursor: default; }
.roundpicker__date {
  margin-left: auto;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ strips */

/* What a team plays in, as a square beside its name. Small enough to sit
   inside a fixture row without pushing the name about, outlined so white
   is a colour rather than a gap. */
.strip-dot {
  flex: none;
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 3px;
  background: var(--strip, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line-strong);
}
.strip { display: inline-flex; align-items: center; gap: 0.45rem; }
.strip__name { font-size: 0.88rem; color: var(--ink-soft); }

.strip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.strip-picker__swatch {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--strip);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.strip-picker__swatch:hover { transform: translateY(-1px); }
.strip-picker__swatch[aria-checked="true"] {
  border-color: var(--cream);
  transform: translateY(-1px);
}


/* The rooms inside Season settings: one row of bubbles, the open one filled. */
.room-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--gap); }
.room-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}
.room-tab:hover { color: var(--ink); border-color: var(--ink-faint); }
.room-tab.is-on {
  background: var(--crimson-500);
  border-color: var(--crimson-500);
  color: #fff;
}


/* A date field with one way in: the browser's own icon is hidden and the
   caret beside it opens the calendar. */
.date-pick { display: inline-flex; align-items: center; gap: .25rem; }
.date-only::-webkit-calendar-picker-indicator { display: none; }
.date-only::-webkit-inner-spin-button { display: none; }
.date-only { cursor: pointer; }


/* The forfeit steps, wherever they are stated: three short lines and the
   warning about repeat forfeits under them. */
.forfeit-rules { margin: 0.5rem 0; }
.forfeit-rules__steps { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; }
.forfeit-rules__note { margin: 0.5rem 0 0; font-size: 0.86em; font-weight: 600; }


/* Fixture changes are waiting to go live. Along the bottom, so it is still
   in view half way down a grid; amber, because nothing is wrong - something
   is just not finished. */
.livebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: #f5b942;
  color: #1c1230;
  font-size: 0.88rem;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
.livebar__text { flex: 1 1 16rem; min-width: 0; }
.livebar__go {
  background: #1c1230;
  color: #fff;
  border-color: #1c1230;
  font-weight: 700;
}
.livebar__go:hover { background: #2c1c4a; }
/* Room for the bar, so it never sits on the last row of a page - and the
   toasts ride above it. */
/* Member view borrows the bar, in the club's purple so it is not mistaken
   for Edit mode's. */
.memberbar { background: #d9c8ff; }
body.has-member-bar { padding-bottom: 4rem; }
body.has-member-bar .toast-stack { bottom: 4.5rem; }
body.has-live-bar { padding-bottom: 4rem; }
body.has-live-bar .toast-stack { bottom: 4.5rem; }
@media (max-width: 520px) {
  .livebar__detail { display: none; }
  body.has-live-bar { padding-bottom: 5.5rem; }
  body.has-live-bar .toast-stack { bottom: 6rem; }
}


/* Edit mode. The bar is amber because nothing is wrong - something is just
   not finished - and the banner is quiet because it is the normal state of
   the page: you are looking, and a button says how to start changing. */
.livebar__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.livebar__quiet {
  background: transparent;
  color: #1c1230;
  border: 1px solid rgba(28, 18, 48, 0.45);
  font-weight: 600;
}
.livebar__quiet:hover { background: rgba(28, 18, 48, 0.08); }

/* The change log: a sheet that rises from the bar. Fixed like the bar, and
   its own scroller, so a long night of edits never pushes the bar away. */
.livelog {
  position: fixed;
  right: 1rem;
  bottom: 4.25rem;
  z-index: 79;
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(60vh, 32rem);
  display: flex;
  flex-direction: column;
  background: #fff8e6;
  color: #1c1230;
  border: 1px solid #f5b942;
  border-radius: var(--r);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  font-size: 0.86rem;
}
.livelog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(28, 18, 48, 0.15);
}
.livelog__since { font-size: 0.78rem; opacity: 0.75; }
.livelog__list { list-style: none; margin: 0; padding: 0.25rem 1rem 0.6rem; overflow-y: auto; }
.livelog__item {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(28, 18, 48, 0.1);
}
.livelog__item:last-child { border-bottom: 0; }
.livelog__kind {
  align-self: start;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(28, 18, 48, 0.12);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.livelog__kind--added { background: #cdebd2; color: #14532d; }
.livelog__kind--removed { background: #f6cfcf; color: #7f1d1d; }
.livelog__league { opacity: 0.7; font-size: 0.8rem; }
.livelog__line { opacity: 0.85; }
.livelog__who { margin-top: 0.15rem; font-size: 0.76rem; opacity: 0.65; }
@media (max-width: 520px) {
  .livelog { left: 0.5rem; right: 0.5rem; bottom: 6rem; width: auto; }
}

.editbanner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: var(--gap);
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  background: var(--surface);
  border-left: 3px solid #f5b942;
  font-size: 0.88rem;
}
.editbanner__text { flex: 1 1 18rem; min-width: 0; color: var(--ink-soft, inherit); }

/* Asking an installed app's user about notifications. */
.push-offer {
  position: fixed; left: 0.75rem; right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 60; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.6rem 1rem;
  max-width: 34rem; margin: 0 auto; padding: 0.8rem 1rem;
  background: var(--surface-2, #33205f); color: var(--ink);
  border: 1px solid rgba(252, 227, 222, 0.22); border-radius: 0.9rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.push-offer__text { display: grid; gap: 0.15rem; font-size: 0.88rem; flex: 1 1 14rem; }
.push-offer__actions { display: flex; gap: 0.5rem; margin-left: auto; }