/* Team Portal — loaded only by portal.html.
   Mobile-first like the rest of the site: base rules are the phone layout,
   min-width queries widen it. Everything here reuses the site's tokens. */

/* Nav: the portal sits apart from the marketing pages. */
.site-nav__link--portal { color: var(--color-gold); }
@media (min-width: 768px) {
  .site-nav__link--portal {
    padding-left: var(--space-4);
    margin-left: var(--space-1);
    border-left: 1px solid var(--border-subtle-dark);
    border-bottom-color: transparent;
  }
}

/* Preview banner — deliberately loud, so sample data is never mistaken
   for a real account. */
.preview-bar {
  background: var(--color-gold);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px var(--gutter);
}
.preview-bar a { color: var(--color-black); text-decoration: underline; }

/* ---------- signed-out ---------- */
/* One column, centred, no wider than the card needs — there is nothing else
   on this page to balance it against. */
.signin-wrap { max-width: 30rem; }
@media (min-width: 768px) { .signin-wrap { margin-inline: auto; } }
.signin-title {
  font-size: var(--text-display-md);
  text-align: center;
  margin-bottom: var(--stack-gap);
}

/* ---------- signed-in header ---------- */
.portal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.portal-head__greeting { font-size: var(--text-display-md); margin: var(--space-2) 0 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--border-subtle-dark);
  margin-top: var(--stack-gap);
}
@media (min-width: 860px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-tile { background: #151515; padding: var(--space-4); min-width: 0; }
.stat-tile__label {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-dim);
}
.stat-tile__value {
  font-family: var(--font-heading);
  font-size: var(--text-heading-sm);
  color: var(--color-white);
  margin-top: 2px;
}
.stat-tile__note { font-size: var(--text-micro); color: var(--color-bone); margin-top: 4px; }

/* ---------- panels ---------- */
.portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-gap);
}
@media (min-width: 960px) {
  .portal-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--split-gap); }
}
.portal-col { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; }
.portal-block { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.portal-block .panel-title { margin: 0; }

.text-back--fwd { align-self: flex-start; }

/* Player card */
.player-card {
  background: var(--color-charcoal);
  padding: var(--space-4);
  border-left: 3px solid var(--color-gold);
}
.player-card__name {
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  text-transform: uppercase;
  line-height: var(--leading-heading);
  color: var(--color-white);
}
.player-card__meta {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 4px;
}

/* ---------- schedule ---------- */
.event-list { display: flex; flex-direction: column; gap: 2px; background: var(--border-subtle-dark); }
/* Flex rather than fixed columns: these rows appear both full width and in a
   narrow overview column, and a rigid grid wraps the date onto two lines in
   the narrow one. */
.event-row {
  background: #151515;
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.event-row__when { flex: 0 0 auto; display: flex; gap: var(--space-3); align-items: baseline; white-space: nowrap; }
.event-row__date {
  font-family: var(--font-heading);
  font-size: var(--text-body-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
}
.event-row__time { font-size: var(--text-body-sm); color: var(--color-gold); }
.event-row__what { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.event-row__title { font-size: var(--text-body-md); color: var(--color-white); }
.event-row__where { flex: 0 0 auto; margin-left: auto; font-size: var(--text-body-sm); color: var(--color-bone); }

.event-kind {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border-hairline-dark);
  color: var(--color-bone);
  flex: 0 0 auto;
}
.event-kind--game { border-color: var(--color-gold); color: var(--color-gold); }
.event-kind--tournament { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }

/* Live score */
.live-card {
  border: 1px solid var(--color-gold);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.live-card__state {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}
.live-card__team { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.live-card__name { font-family: var(--font-heading); font-size: var(--text-body-lg); color: var(--color-white); }
.live-card__score {
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

/* ---------- dues ---------- */
.dues-figure {
  font-family: var(--font-display);
  font-size: var(--text-panel-price);
  line-height: 1;
  color: var(--color-white);
}
.dues-note { font-size: var(--text-body-sm); color: var(--color-bone); }
.pay-state {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-bone);
}
.pay-state--paid { color: var(--color-gold); }
.pay-state--due { color: #ff9d94; }

/* ---------- booking shortcuts + documents ---------- */
.book-row, .doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle-dark);
  min-height: var(--tap-target);
}
.book-row__label, .doc-row__label { font-size: var(--text-body-md); color: var(--color-white); }
.book-row__note, .doc-row__meta { font-size: var(--text-body-sm); color: var(--color-bone); margin-top: 2px; }
.book-row__cta {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  flex: 0 0 auto;
}
.doc-tag {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--border-hairline-dark);
  color: var(--color-bone);
  flex: 0 0 auto;
}
.doc-tag--action, .doc-tag--new { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }

/* ---------- announcements ---------- */
.announce {
  border-top: 1px solid var(--border-subtle-dark);
  padding-top: var(--space-3);
}
.announce__meta {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}
.announce__body {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--color-bone);
}

/* ---------- admin ---------- */
.admin-sections { margin-bottom: var(--stack-gap); }

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.admin-search {
  flex: 1 1 220px;
  min-height: var(--tap-target);
  background: #151515;
  border: 1px solid var(--border-hairline-dark);
  color: var(--color-white);
  padding: 0 var(--space-4);
  font-size: var(--text-body-md);
}
.admin-search:focus { outline: 1px solid var(--color-gold); }
.admin-count {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold-dim);
  margin: var(--space-4) 0 var(--space-2);
}

/* CSV import — the review step before anything is written. */
.admin-import { display: flex; flex-direction: column; gap: var(--space-3); }
/* The panel is a stretching column, so buttons in it would run the full width
   and read as banners rather than as things to press. */
.admin-import-action { align-self: flex-start; }
.admin-import__skip {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: #ffb4ac;
}
.admin-status {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-bone);
  min-height: 1.2em;
}
.admin-status--ok {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-gold);
  background: rgba(184, 146, 78, 0.12);
  color: var(--color-cream);
}

/* Player table — whole row opens the record. */
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover { background: rgba(184, 146, 78, 0.12); }
.admin-tr__action { text-align: right; white-space: nowrap; }
.admin-open {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Event + announcement cards. */
.admin-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) { .admin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .admin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  background: #151515;
  border: 1px solid var(--border-subtle-dark);
  border-left: 3px solid var(--color-gold);
  padding: var(--space-4);
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-width: 0;
}
.admin-card:hover { border-color: var(--color-gold); }
.admin-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin-card__when {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-bone);
}
.admin-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  color: var(--color-white);
}
.admin-card__meta { font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-bone); }

/* Detail editor — grouped cards, like the rest of the portal. */
.admin-form { display: flex; flex-direction: column; gap: var(--stack-gap); margin-top: var(--stack-gap); }
.admin-group { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-delete { border-color: #d2564b; color: #ff9d94; }

/* ---------- scoreboard ---------- */
.score-row {
  background: #151515;
  border-left: 3px solid var(--border-subtle-dark);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: 2px;
}
.score-row--live { border-left-color: #d2564b; }
.score-row.is-saving { opacity: 0.6; }
.score-row.is-failed { border-left-color: #ff9d94; }
.score-row__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.score-row__when { font-size: var(--text-body-sm); color: var(--color-bone); }
.score-row__state {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}
.score-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
}
.score-line__team {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  color: var(--color-white);
  min-width: 0;
  overflow-wrap: anywhere;
}
.score-line__controls { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
/* Deliberately large: these get tapped one-handed, outdoors, in a hurry. */
.score-btn {
  width: 52px;
  height: 52px;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.score-btn:active { background: var(--color-gold); color: var(--color-black); }
.score-line__value {
  min-width: 3ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.score-row__states { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- flyer upload ---------- */
.upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.upload__btn { cursor: pointer; }
.upload__btn.is-busy { opacity: 0.6; pointer-events: none; }
.upload__status { font-size: var(--text-body-sm); color: var(--color-bone); }
.upload__preview {
  display: block;
  flex: 0 0 auto;
  width: 96px;
  height: auto;
  border: 1px solid var(--border-hairline-dark);
}

/* ============================================================
   Lineup cards
   ============================================================ */
.lineup-bar { margin-bottom: var(--stack-gap); }
.lineup-bar__team { flex: 0 1 auto; }

.lineup-split {
  display: grid;
  /* minmax(0, …) rather than 1fr: the card's table has fixed columns, and a
     plain 1fr track refuses to go below its content, pushing the whole page
     sideways on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) { .lineup-split { grid-template-columns: 20rem minmax(0, 1fr); } }
.lineup-picker, .lineup-card { min-width: 0; }

/* Who is playing */
.lineup-picker {
  background: #151515;
  border: 1px solid var(--border-subtle-dark);
  padding: var(--space-5);
}
.lineup-picker__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}
.lineup-picker__hint {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-bone);
}
.lineup-picker__list { display: flex; flex-direction: column; }
.lineup-pick {
  display: grid;
  grid-template-columns: auto 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  min-height: var(--tap-target);
  border-bottom: 1px solid var(--border-hairline-dark);
  cursor: pointer;
}
.lineup-pick:last-child { border-bottom: none; }
.lineup-pick__box { width: 18px; height: 18px; accent-color: var(--color-gold); cursor: pointer; }
.lineup-pick__no {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-gold-dim);
}
.lineup-pick__name { color: var(--color-white); min-width: 0; }
.lineup-pick__drop,
.lineup-card__drop {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.125rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}
.lineup-pick__drop:hover, .lineup-card__drop:hover { color: #ff9d94; }

.lineup-add { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.lineup-add__no, .lineup-add__name {
  min-height: var(--tap-target);
  background: #0f0f0f;
  border: 1px solid var(--border-hairline-dark);
  color: var(--color-white);
  padding: 0 var(--space-3);
  font-size: var(--text-body-md);
  min-width: 0;
}
.lineup-add__no { width: 3.5rem; text-align: center; }
.lineup-add__name { flex: 1 1 auto; }
.lineup-picker__restore {
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  cursor: pointer;
}

/* The card. White because it is paper — what is on screen is what prints. */
.lineup-card {
  background: #fff;
  color: #111;
  padding: 2rem;
  font-family: var(--font-body);
}
.lineup-card__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.lineup-card__brand { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
.lineup-card__mark {
  width: 46px; height: 46px;
  object-fit: contain;
  background: #111;
  padding: 5px;
  flex: 0 0 auto;
}
.lineup-card__team {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: #111;
}
.lineup-card__vs { color: #666; font-size: var(--text-body-sm); }
.lineup-card__away { text-align: right; margin-left: auto; }
.lineup-card__opponent {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: #111;
  text-align: right;
  border: none;
  background: none;
  padding: 0;
  min-width: 12rem;
}
.lineup-card__opponent::placeholder { color: #999; }
.lineup-card__date {
  font-size: var(--text-body-sm);
  color: #555;
  text-align: right;
  border: none;
  background: none;
  padding: 0;
  margin-top: 2px;
}

.lineup-card__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  border-top: 3px solid #111;
}
.lineup-card__table th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #444;
  background: #eef1f4;
  padding: 8px 10px;
}
.lineup-card__table td { padding: 9px 10px; border-bottom: 1px solid #e3e6ea; }
.lineup-card__table .lineup-col-0, .lineup-card__n { width: 2.5rem; color: #666; font-variant-numeric: tabular-nums; }
.lineup-card__name { font-size: 1.0625rem; color: #111; }
.lineup-card__table .lineup-col-2, .lineup-card__no { text-align: right; width: 3rem; font-variant-numeric: tabular-nums; }
.lineup-card__table .lineup-col-3, .lineup-card__pos { width: 5rem; }
.lineup-card__poschoice {
  border: none;
  background: none;
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  color: #111;
  padding: 2px 0;
  min-height: 0;
}
.lineup-card__x { width: 2.5rem; }
.lineup-card__empty { margin: var(--space-5) 0; color: #777; font-size: var(--text-body-sm); }

.lineup-card__coaches { display: flex; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; }
.lineup-card__coach { flex: 1 1 12rem; min-width: 0; }
.lineup-card__coachlabel {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #666;
}
.lineup-card__coachname {
  width: 100%;
  border: none;
  border-bottom: 1px solid #111;
  background: none;
  padding: 4px 0;
  font-size: var(--text-body-md);
  color: #111;
  min-height: 1.9rem;
}
.lineup-card__footer {
  margin-top: var(--space-5);
  text-align: right;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #555;
}

/* The printed sheet is built only when Print is pressed, and never shown on
   screen; on paper it is the only thing left. */
#lineup-print { display: none; }
@media print {
  body > *:not(#lineup-print) { display: none !important; }
  #lineup-print { display: block; }
  #lineup-print .lineup-card {
    padding: 0 0 1.5rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  #lineup-print .lineup-card + .lineup-card {
    padding-top: 1.5rem;
    border-top: 1px dashed #999;
  }
  @page { margin: 12mm; }
}

/* On a phone the card has to give up its margins before its columns: a lineup
   with a squeezed name column is no use to anyone. */
@media (max-width: 600px) {
  .lineup-card { padding: 1.25rem; }
  .lineup-card__table th, .lineup-card__table td { padding: 8px 6px; }
  .lineup-card__table .lineup-col-3, .lineup-card__pos { width: 4rem; }
  .lineup-card__away { margin-left: 0; width: 100%; text-align: left; }
  .lineup-card__opponent, .lineup-card__date { text-align: left; min-width: 0; width: 100%; }
}

/* Two cards have to share one sheet, so the printed card is set tighter than
   the one on screen — the screen has a scrollbar, paper does not. */
@media print {
  #lineup-print .lineup-card { font-size: 9.5pt; }
  #lineup-print .lineup-card__mark { width: 32px; height: 32px; padding: 3px; }
  #lineup-print .lineup-card__team { font-size: 14pt; }
  #lineup-print .lineup-card__opponent { font-size: 13pt; }
  #lineup-print .lineup-card__date { font-size: 8.5pt; }
  #lineup-print .lineup-card__table { margin-top: 8px; border-top-width: 2px; }
  #lineup-print .lineup-card__table th { padding: 3px 6px; font-size: 7pt; }
  #lineup-print .lineup-card__table td { padding: 3.5px 6px; }
  #lineup-print .lineup-card__name { font-size: 10pt; }
  #lineup-print .lineup-card__coaches { margin-top: 10px; gap: 16px; }
  #lineup-print .lineup-card__coachname { min-height: 0; padding: 2px 0; font-size: 9.5pt; }
  #lineup-print .lineup-card__coachlabel { font-size: 6.5pt; }
  #lineup-print .lineup-card__subs { font-size: 8pt; }
  #lineup-print .lineup-card__footer { margin-top: 8px; font-size: 6.5pt; }
  #lineup-print .lineup-card { padding: 0 0 10px; }
  #lineup-print .lineup-card + .lineup-card { padding-top: 12px; }
}

.lineup-import {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline-dark);
}
.lineup-import__btn {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  cursor: pointer;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
}
.lineup-import__btn:hover { color: var(--color-cream); }
.lineup-import__status { font-size: var(--text-body-sm); color: var(--color-bone); }