/* ALSI Basketball — page-specific styles. */

/* ---- login / set-password ------------------------------------------------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; }
.auth__hero {
  background: var(--sun-500); color: var(--ink-900);
  padding: calc(var(--sp-8) + env(safe-area-inset-top)) var(--sp-4) var(--sp-8);
  position: relative; overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  text-align: center;
}
.auth__hero .hero__facet { opacity: .55; }
.auth__logo { width: auto; max-width: 92%; max-height: 140px; margin: 0 auto var(--sp-1); position: relative; z-index: 1; }
.auth__brand { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: .02em; margin: 0; position: relative; z-index: 1; }
.auth__tag { font-family: var(--font-script); font-size: 1.5rem; color: var(--grass-500); position: relative; z-index: 1; margin-top: var(--sp-1); }
.auth__body { flex: 1; padding: var(--sp-6) var(--sp-4); max-width: 480px; width: 100%; margin: 0 auto; }
.auth__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: var(--sp-1); }
.pw-strength { height: 6px; border-radius: 3px; background: var(--paper-100); overflow: hidden; margin-top: 8px; }
.pw-strength__fill { height: 100%; width: 0; background: var(--danger); transition: width .2s ease, background .2s ease; }

/* ---- profile -------------------------------------------------------------- */
.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.profile-photo { position: relative; }
.profile-photo__edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--orange-500); color: #fff; border: 3px solid var(--paper-0);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.profile-photo__edit svg { width: 15px; height: 15px; }
.dl { display: grid; grid-template-columns: minmax(100px,auto) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.dl dt { color: var(--ink-500); font-size: var(--step--1); font-weight: 700; }
.dl dd { margin: 0; font-weight: 600; word-break: break-word; }

/* ---- team ----------------------------------------------------------------- */
.team-head {
  background: var(--sun-500); color: var(--ink-900);
  border-radius: var(--r-lg); padding: var(--sp-4);
  position: relative; overflow: hidden; margin-bottom: var(--sp-4);
}
.team-head .hero__facet { opacity: .45; }
.team-head__top { display: flex; align-items: center; gap: var(--sp-3); position: relative; z-index: 1; }
.team-logo {
  width: 56px; height: 56px; border-radius: var(--r-md); flex: none;
  background: var(--paper-0); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--ink-900); overflow: hidden;
  box-shadow: var(--shadow-1);
}
.team-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-head__name { font-family: var(--font-display); font-size: var(--step-1); margin: 0; line-height: 1.05; }
.team-head__meter { position: relative; z-index: 1; margin-top: var(--sp-4); }

/* ---- lobby ---------------------------------------------------------------- */
.filter-scroll { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); }
.filter-chip {
  flex: none; padding: 8px 14px; border-radius: var(--r-full);
  border: 1.5px solid var(--line); background: var(--paper-0); color: var(--ink-700);
  font-weight: 700; font-size: var(--step--1); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.filter-chip.is-active { border-color: var(--cat-500, var(--ink-900)); background: var(--cat-100, var(--paper-100)); color: var(--cat-500, var(--ink-900)); }
.search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.search .input { flex: 1; }
.openteam { display: flex; align-items: center; gap: var(--sp-3); }
.openteam__body { flex: 1; }

/* ---- history timeline ----------------------------------------------------- */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: var(--sp-4); }
.tl-item::before {
  content: ""; position: absolute; left: -22px; top: 4px; width: 14px; height: 14px;
  border-radius: 4px; transform: rotate(45deg);
  background: var(--cat-500, var(--ink-300)); box-shadow: 0 0 0 3px var(--paper-0);
}
.tl-season { font-family: var(--font-display); font-size: var(--step-0); }

/* ---- schedule / standings ------------------------------------------------- */
.match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.match:last-child { border-bottom: none; }
.match__team { font-weight: 700; }
.match__team--home { text-align: right; }
.match__score { font-family: var(--font-mono); font-weight: 700; font-size: var(--step-1); text-align: center; }
.match__meta { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-500); text-align: center; }

.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th, .table td { padding: 10px 8px; text-align: right; white-space: nowrap; }
.table th:first-child, .table td:first-child { text-align: left; }
.table thead th { background: var(--cat-100, var(--paper-100)); color: var(--cat-500, var(--ink-700)); font-family: var(--font-heading); position: sticky; top: 56px; }
.table tbody tr { border-bottom: 1px solid var(--line); }
.table .mono { font-family: var(--font-mono); }
.table .rank { font-family: var(--font-display); }

/* ---- announcements -------------------------------------------------------- */
.ann { border-left: 4px solid var(--cat-500, var(--sun-500)); padding-left: var(--sp-4); }
.ann__date { font-size: var(--step--1); color: var(--ink-500); font-family: var(--font-mono); }

/* ---- merch (session 5) ---------------------------------------------------- */
.merch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.merch-tile { background: var(--paper-0); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.merch-tile__img { aspect-ratio: 1; background: var(--paper-100); display: flex; align-items: center; justify-content: center; }
.merch-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.merch-tile__body { padding: var(--sp-3); }
.merch-tile__name { font-weight: 700; font-size: var(--step--1); }
.merch-tile__price { font-family: var(--font-mono); font-weight: 700; color: var(--orange-600); }