/* CRAP League — stylesheet */

:root {
  --green:       #1a7a4a;
  --green-dark:  #145c37;
  --green-light: #e8f5ee;
  --gold:        #c9a84c;
  --text:        #1a1a1a;
  --text-muted:  #6b7280;
  --border:      #d1d5db;
  --bg:          #f9fafb;
  --white:       #ffffff;
  --red:         #dc2626;
  --red-light:   #fef2f2;
  --radius:      8px;
  --shadow:      0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 25px rgba(0,0,0,0.12);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

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

/* ── Install banner (add-to-home-screen nudge) ─────────────────────────── */

.install-banner {
  position: relative;
  background: var(--green-light);
  border-bottom: 1px solid var(--border);
  padding: .6rem 2.2rem .6rem 1rem;
}
.install-banner-body p { font-size: .82rem; margin-top: .15rem; color: var(--text); }
.install-banner-body strong:first-child { font-size: .85rem; }
.install-banner-body .btn { margin-top: .4rem; }
.install-banner-close {
  position: absolute;
  top: .4rem;
  right: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .85rem;
  padding: .2rem .4rem;
  width: auto;
  line-height: 1;
}
.install-icon-share {
  display: inline-block;
  width: 13px;
  height: 15px;
  border: 1.6px solid var(--text);
  border-radius: 2px;
  position: relative;
  vertical-align: middle;
  margin: 0 1px;
}
.install-icon-share::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 1.6px;
  height: 7px;
  background: var(--text);
  transform: translateX(-50%);
}
.install-icon-share::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 6px;
  height: 6px;
  border-top: 1.6px solid var(--text);
  border-right: 1.6px solid var(--text);
  transform: translateX(-50%) rotate(-45deg);
}

/* ── Auth page ──────────────────────────────────────────────────────────── */

body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem 1rem;   /* keeps a margin above and below the card when the form is tall */
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
}

.auth-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 460px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
}
.auth-logo-img {
  width: 180px;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}
.auth-heading {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0.5rem 0 0.1rem;
}
.auth-logo p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.motto {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field {
  margin-bottom: 1rem;
}
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
}

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  background: var(--green);
  color: var(--white);
  width: 100%;
}
button:hover:not(:disabled), .btn:hover { background: var(--green); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-sm     { padding: 0.35rem 0.75rem; font-size: 0.8rem; width: auto; }
.btn-ghost  { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-ghost:hover { background: var(--green-light); }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #b91c1c; }

.error {
  color: var(--red);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--red-light);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
}

/* ── App shell ──────────────────────────────────────────────────────────── */

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar-logo {
  height: 32px;
  width: auto;
}
.topbar-brand-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.topbar-nav { display: flex; gap: 0.25rem; }
.topbar-nav a {
  color: rgba(255,255,255,0.85);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.topbar-nav a:hover, .topbar-nav a.active {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  text-decoration: none;
}
.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
}
.topbar-user button {
  width: auto;
  background: rgba(255,255,255,0.15);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}
.topbar-user button:hover { background: rgba(255,255,255,0.25); }

.main-content {
  flex: 1;
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── Cards & panels ─────────────────────────────────────────────────────── */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.section-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
}

/* ── Leaderboard ────────────────────────────────────────────────────────── */

.leaderboard {
  width: 100%;
  border-collapse: collapse;
}
.leaderboard th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--border);
}
.leaderboard td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.leaderboard tr:last-child td { border-bottom: none; }
.leaderboard tr:hover td { background: var(--green-light); }

.rank-1 .rank-num { color: var(--gold); font-weight: 800; font-size: 1.1rem; }
.rank-2 .rank-num { color: #9ca3af; font-weight: 700; }
.rank-3 .rank-num { color: #b45309; font-weight: 700; }

.points-big {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green);
}

/* ── Round table ────────────────────────────────────────────────────────── */

.round-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.round-table th {
  background: var(--green);
  color: var(--white);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.round-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.round-table tr:last-child td { border-bottom: none; }
.round-table tr:hover td { background: var(--green-light); }

.score-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.score-pill.correct   { background: #dcfce7; color: #166534; }
.score-pill.incorrect { background: #fee2e2; color: #991b1b; }
.score-pill.partial   { background: #fef9c3; color: #854d0e; }
.score-pill.voided    { background: var(--red-light); color: var(--red); }

.round-table td.cell-correct   { background: #dcfce7; color: #166534; }
.round-table td.cell-incorrect { background: #fee2e2; color: #991b1b; }
.round-table td.cell-partial   { background: #fef9c3; color: #854d0e; }
.round-table td.cell-voided    { background: #f3f4f6; color: #6b7280; }
.round-table tr:hover td.cell-correct   { background: #bbf7d0; }
.round-table tr:hover td.cell-incorrect { background: #fecaca; }
.round-table tr:hover td.cell-partial   { background: #fef08a; }
.round-table tr:hover td.cell-voided    { background: #e5e7eb; }

.compact-pivot th, .compact-pivot td { padding: .25rem .4rem; font-size: .72rem; }
.compact-pivot th.predictor-col, .compact-pivot td.predictor-col { min-width: 76px; width: 76px; }
/* Points by round: tighter side padding, and the header puts the member's round points under the name
   (a long name such as 'Fenton-White' plus its badge side by side was wider than the column and ran into the next one) */
.compact-pivot th.predictor-col, .compact-pivot td.predictor-col { padding-left: .25rem; padding-right: .25rem; }
.compact-pivot th.predictor-col > div { flex-direction: column !important; gap: .1rem !important; white-space: normal !important; }
.compact-pivot th.predictor-col > div > span:first-child { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }

.round-table th.predictor-col,
.round-table td.predictor-col {
  min-width: 98px;
  width: 98px;
  text-align: center;
  border-left: 2px solid rgba(0,0,0,0.10);
}

/* Name over points so long names never spill into the next column */
.round-table td.predictor-col > div { flex-direction: column; align-items: center !important; gap: 0 !important; }
.round-table td.predictor-col > div > span { white-space: normal !important; margin-left: 0 !important; max-width: 100%; overflow-wrap: normal; font-size: .84rem !important; }
.round-table td.predictor-col > div > span:last-child { font-size: .72rem !important; font-weight: 700; }

/* Score explanation tooltip trigger */
.explanation-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  display: block;
  margin-top: 0.1rem;
}

/* ── Tier badges ────────────────────────────────────────────────────────── */

.tier-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tier-fulltime  { background: #dbeafe; color: #1d4ed8; }
.tier-parttime  { background: #ede9fe; color: #6d28d9; }
.tier-panel     { background: #fef3c7; color: #92400e; }
.tier-other     { background: #f3f4f6; color: #374151; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.tab-btn {
  background: none;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
  width: auto;
}
.tab-btn:hover { color: var(--green); }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }

/* ── Misc ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--green-light);
  color: var(--green);
}
.badge-gold { background: #fef3c7; color: #92400e; }

.season-select {
  appearance: none;
  width: auto;
  border: none;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E")
    no-repeat right .2rem center;
  background-size: .6em auto;
  padding: .2rem 1.1rem .2rem .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.season-select:focus { outline: none; }

[x-cloak] { display: none !important; }

.spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state p { margin-top: 0.5rem; font-size: 0.9rem; }

/* ── Typeahead ──────────────────────────────────────────────────────────── */

/* Predictor / points / hedge line up in fixed columns regardless of how
   long the picked name is — was flex before, so a long chip pushed the
   points badge and hedge button sideways to a different x per row. */
.tip-row-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.2rem 5.6rem auto;
  align-items: center;
  gap: .4rem;
  width: 100%;
}
.tip-row-grid-hedge {
  grid-template-columns: minmax(0, 1fr) 3.6rem 2rem auto;
}
/* Every round's table uses the same fixed columns (Time, Match, Tip), so the Tip column lines up from one round to the
   next instead of each table sizing itself to its own contents. */
@media (min-width: 641px) {
  .tip-grid { table-layout: fixed; }
  /* !important: the Time header carries an inline width of its own */
  .tip-grid th:nth-child(1) { width: 6.5rem !important; }
  .tip-grid th:nth-child(2) { width: 8rem; }
  /* The kickoff may wrap onto two lines here, so the Tip column keeps enough room for a full name */
  .tip-grid td:nth-child(1) { white-space: normal !important; }
  .tip-grid td:nth-child(1), .tip-grid td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
}
/* Wider screens: the tip box keeps a minimum width, so the table columns do not resize when a pick is edited
   (picked-name chip to search box). */
@media (min-width: 1000px) {
  .tip-grid th:nth-child(1) { width: 9.5rem !important; }
  .tip-grid th:nth-child(2) { width: 11rem; }
  .tip-grid td:nth-child(1) { white-space: nowrap !important; }
  .tip-row-grid { min-width: 18rem; }
}
/* The chip and the search box are the same height, so the row does not jump when you click into a pick. */
.tip-row-grid .tip-chip { height: 2rem; box-sizing: border-box; }
.tip-row-grid .typeahead-wrap input.grid-input { height: 2rem; box-sizing: border-box; }
/* The text in the search box starts exactly where the picked name's text starts in the chip (chip: 1px border + .75rem
   padding; box: 1.5px border), so the name does not slide left when you click into it. */
.tip-row-grid .typeahead-wrap input.grid-input { padding-left: calc(.75rem - .5px) !important; }
.tip-col-1 { grid-column: 1; }
.tip-col-2 { grid-column: 2; justify-self: end; }
.tip-col-3 { grid-column: 3; justify-self: end; }
.tip-col-4 { grid-column: 4; justify-self: end; }
.tip-col-full { grid-column: 1 / -1; }

.typeahead-wrap {
  position: relative;
}
.typeahead-wrap input {
  width: 100%;
}
.intel-clash-box {
  border-radius: 6px;
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.intel-clash-box input {
  background: #fef2f2;
}
.tip-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0.35rem 0.4rem 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-light);
  border: 1px solid var(--green);
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  width: fit-content;
}
.tip-chip:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.tip-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tip-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 50%;
  color: var(--green-dark);
  cursor: pointer;
  font-size: .7rem;
  line-height: 1;
}
.tip-chip button:hover {
  background: var(--white);
}
.typeahead-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
}
.typeahead-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover,
.typeahead-item.focused { background: var(--green-light); }
.typeahead-item.suggest {
  color: var(--green);
  font-style: italic;
  font-size: 0.85rem;
}
.typeahead-item.suggest:hover { background: var(--green-light); }
.pts-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.pts-label.pts-1 { color: #1d4ed8; }
.pts-label.pts-2 { color: #6d28d9; }
.pts-label.pts-3 { color: #92400e; }
.pts-label.pts-4 { color: #374151; }

/* ── Intel feed ─────────────────────────────────────────────────────────── */

.intel-item {
  border-left: 3px solid var(--green);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
  background: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem;
}
.intel-item.has-clash {
  border-left-color: #f59e0b;
  background: #fffbeb;
}
.intel-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.intel-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.intel-chip {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.intel-chip-ref { background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green); }
.intel-chip-round, .intel-chip-date { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.clash-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  color: #78350f;
}
.clash-warning .icon { flex-shrink: 0; font-style: normal; }

/* ── Prediction entry grid ──────────────────────────────────────────────── */

.fixture-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.fixture-header {
  background: var(--green);
  color: var(--white);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.fixture-header strong { font-size: 0.95rem; }
.fixture-body { padding: 0.75rem 1rem 1rem; }
.role-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.role-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Appointments season table ──────────────────────────────────────────── */

.appt-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.appt-table th {
  background: var(--green); color: #fff; padding: 5px 6px;
  font-size: .72rem; white-space: nowrap; font-weight: 700;
}
.appt-table td { padding: 3px 3px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.appt-table tbody tr:hover { background: var(--green-light); }

.appt-select {
  width: 100%; min-width: 130px; max-width: 180px;
  padding: 3px 5px; font-size: .78rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; cursor: pointer;
}
.appt-select.appt-dirty { background: #fef9c3; border-color: #d97706; }
/* the table cells are search boxes now (type to find an official), looking like the old drop-downs */
input.appt-select { padding: 3px 5px; font-size: .78rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: text; min-height: 0; line-height: 1.4; box-shadow: none; }
input.appt-select:focus { outline: none; border-color: var(--green); }
input.appt-select.appt-dirty { background: #fef9c3; border-color: #d97706; }
.appt-table .typeahead-item { padding: .4rem .65rem; font-size: .85rem; }

/* ── Schedule tab inline editing ────────────────────────────────────────── */

.input-inline {
  padding: 3px 6px; font-size: .82rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; font-family: inherit;
}
.input-inline:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(26,122,74,0.12); }
input[type="datetime-local"].input-inline { font-size: .78rem; }

.form-label {
  display: block; font-size: .72rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .02em;
}

.schedule-round-block {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: .5rem;
  box-shadow: var(--shadow);
}
.schedule-round-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .75rem; cursor: pointer; user-select: none; gap: .5rem;
}
.schedule-round-header:hover { background: var(--green-light); border-radius: var(--radius) var(--radius) 0 0; }
.schedule-round-body { padding: .5rem .75rem .75rem; border-top: 1px solid var(--border); }

/* ── Notification inbox badge ───────────────────────────────────────────── */

.inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  margin-left: 4px;
}

/* ── Compact tip-entry grid ─────────────────────────────────────────────── */

.mode-toggle {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.mode-toggle .btn {
  border-radius: 0;
  border: none;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  width: auto;
}
.mode-toggle .btn.active {
  background: var(--green);
  color: var(--white);
}
.mode-toggle .btn:not(.active) {
  background: var(--white);
  color: var(--green);
}
.mode-toggle .btn:not(.active):hover { background: var(--green-light); }

.tip-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tip-grid th {
  background: var(--green);
  color: var(--white);
  padding: 0.45rem 0.65rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tip-grid td {
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tip-grid tr:last-child td { border-bottom: none; }
.tip-grid tr:hover td { background: var(--green-light); }
.grid-input {
  padding: 0.3rem 0.5rem !important;
  font-size: 0.85rem !important;
  min-width: 0;
}
.tip-saved-ok   { font-size: .72rem; white-space: nowrap; flex-shrink: 0; color: var(--green); }
.tip-saved-warn { font-size: .72rem; white-space: nowrap; flex-shrink: 0; color: #92400e; }
/* No white-space:nowrap here (unlike tip-saved-ok/warn above) — this message can
   be a full sentence (LOTG rule text), and forcing it onto one line pushed the
   row wider than the viewport on mobile, causing the whole page to shrink to fit
   instead of just this text wrapping. */
.tip-flash-err  { font-size: .72rem; color: #dc2626; font-weight: 600; animation: tip-flash-in .3s ease-out; }

@keyframes tip-flash {
  0%   { opacity: 0; transform: translateX(4px); }
  18%  { opacity: 1; transform: translateX(0); }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Transient "Saved"/"Changes saved" confirmation only — fades itself out via
   this animation, so only ever apply it to messages the JS also treats as
   temporary (savedFlash). tip-flash-err is persistent (see app.js) and must
   not share this class, or it visually disappears after 2.5s regardless of
   the JS state still holding the error. */
.tip-chip-wrap { position: relative; display: flex; width: fit-content; max-width: 100%; }
.tip-flash-msg {
  /* A small popup just to the right of the picked name that takes no room in the layout and is gone after 2 seconds. */
  position: absolute; left: 100%; margin-left: .5rem; top: 50%;
  grid-column: auto; grid-row: auto;
  z-index: 5; pointer-events: none; white-space: nowrap;
  background: var(--green); border: 1px solid var(--green); border-radius: 6px;
  padding: 2px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.2);
  animation: tip-pop 2s ease-out forwards; font-weight: 600;
}
.tip-flash-msg.tip-saved-ok, .tip-flash-msg.tip-saved-warn { color: #fff; }
/* with an intel warning attached it is amber instead of green, still white text */
.tip-flash-msg.tip-saved-warn { background: #d97706; border-color: #d97706; }
@keyframes tip-pop {
  0%   { opacity: 0; transform: translate(-6px, -50%); }
  8%   { opacity: 1; transform: translate(0, -50%); }
  80%  { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(0, -50%); }
}

/* Persistent messages (tip-flash-err) still fade in once, they just don't fade back out. */
@keyframes tip-flash-in {
  0%   { opacity: 0; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Topbar "saved" confirmation — one consolidated indicator per page instead of
   one per fixture row; only rendered once the backend has confirmed the write,
   so its mere presence is the guarantee (see timeAgo()). Permanent pill so it
   reads as a persistent status, not a fading toast. */
@keyframes tip-saved-pop {
  0%   { opacity: 0; transform: scale(.85); }
  55%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
/* replayed on every confirmed save (not just first appearance) via a JS class
   toggle (pulseSavedIndicator in app.js) — the pill brightens + bounces so
   "Saved just now" reads as a live event, not a quietly-updating label. */
@keyframes tip-saved-pulse {
  0%   { transform: scale(1); background: rgba(186,243,207,.18); }
  25%  { transform: scale(1.1); background: rgba(186,243,207,.5); }
  100% { transform: scale(1); background: rgba(186,243,207,.18); }
}
.topbar-saved {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(186,243,207,.18);
  font-size: .8rem;
  white-space: nowrap;
  color: rgba(255,255,255,0.9);
  animation: tip-saved-pop .35s ease-out;
}
.topbar-saved.saved-pulse {
  animation: tip-saved-pulse .6s ease-out;
}

/* ── Sparklines ─────────────────────────────────────────────────────────── */

.sparkline-wrap {
  display: flex;
  gap: 2px;
  align-items: center;
}
.spark-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  cursor: default;
}
.spark-zero { background: #f3f4f6; color: #9ca3af; }
.spark-low  { background: #dcfce7; color: #166534; }
.spark-mid  { background: #86efac; color: #14532d; }
.spark-high { background: #22c55e; color: #fff; }

/* ── By-round breakdown table ───────────────────────────────────────────── */

.by-round-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.by-round-table th {
  background: var(--green);
  color: var(--white);
  padding: 0.35rem 0.5rem;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}
.by-round-table th:first-child { text-align: left; min-width: 80px; }
.by-round-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.by-round-table td:first-child { text-align: left; font-weight: 600; }
.by-round-table tr:last-child td { border-bottom: none; }
.by-round-table tr:hover td { background: var(--green-light); }
.by-round-pts {
  display: inline-block;
  min-width: 22px;
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  font-weight: 600;
  text-align: center;
}
.by-round-pts-0    { color: #9ca3af; border: 1px solid #d1d5db; }
.by-round-pts-low  { background: #dcfce7; color: #166534; }
.by-round-pts-mid  { background: #86efac; color: #14532d; }
.by-round-pts-high { background: #22c55e; color: #fff; }

/* ── Hedge / picket UI ──────────────────────────────────────────────────── */

.hedge-btn {
  padding: 0.15rem 0.5rem !important;
  font-size: 0.72rem !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}
.hedge-btn:hover, .hedge-btn.hedge-active {
  background: #fef3c7 !important;
  color: #78350f !important;
}
.picket-badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 0.3rem;
}

/* ── Season-wide tips accordion ─────────────────────────────────────────── */

.tips-round-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  margin-bottom: .5rem;
  overflow: hidden;
}

.tips-round-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.tips-round-header:hover { background: var(--green-light); }

/* Locked grid: grey out rows */
.tip-grid-locked tbody tr td { opacity: .55; }
.tip-grid-locked tbody tr:hover td { background: transparent; opacity: .55; }

/* ── Flat season Predictions view ────────────────────────────────────────── */

/* Divider between stacked finals games/round-total blocks inside a round box.
   Left/right/top/bottom perimeter is drawn once by .season-round-section
   itself; a game card only adds this if something else follows it, so the
   two borders never sit side by side doubling up the line. */
.finals-game-divider {
  border-bottom: 1px solid var(--text);
}

.season-round-section {
  border: 1px solid var(--text);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  margin-bottom: .75rem;
  /* no overflow:hidden here — it clipped the typeahead dropdown inside open
     rounds. Top corners are rounded on the header itself instead (matches
     .fixture-header's approach); the finals/panel branch (index.html and
     demo.html) clips its own bottom corners locally instead, since that
     content is never an open round with a dropdown in it. */
}

.season-round-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  gap: .5rem;
}

/* Collapsed round: the header is the whole visible box, so it needs the
   bottom corners too (normally left square, since the body content below
   it carries those) or the round box's own rounded corners never render. */
.season-round-header.header-collapsed {
  border-bottom: none;
  border-radius: calc(var(--radius) - 1px);
}

.season-deadline {
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.round-totals-row td {
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: .85rem;
}

/* ── Round status badges ─────────────────────────────────────────────────── */

.round-status-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #e5e7eb;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.round-status-active  { background: #dcfce7; color: #15803d; }
.round-status-upcoming { background: #dbeafe; color: #1d4ed8; }

/* ── Past rounds ──────────────────────────────────────────────────────────── */
/* Previously washed out with a faint border-color + opacity dim, which fought
   against the round box's own border everywhere the round-past class actually
   shows up: the whole history in "All Predictions" and /demo. Header tint is
   still enough to distinguish it from an active/upcoming round. */

.round-past .season-round-header {
  background: #f3f4f6;
}

/* ── Active round: green highlight ───────────────────────────────────────── */

.round-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), var(--shadow);
}

.round-active .season-round-header {
  background: var(--green-light);
}

/* ── Upcoming round: blue tint ───────────────────────────────────────────── */

.round-upcoming {
  border-color: #93c5fd;
}

.round-upcoming .season-round-header {
  background: #eff6ff;
}

/* ── Bottom nav (mobile) ─────────────────────────────────────────────────── */

.bottom-nav { display: none; }

.bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  padding: .25rem .125rem;
  transition: color .15s, background .15s;
  text-align: center;
  border: none;
  background: none;
  white-space: nowrap;
}
.bottom-nav-item.active { color: var(--green); background: var(--green-light); }
.bottom-nav-item:hover  { color: var(--green); text-decoration: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Shell */
  .main-content   { padding: .75rem .75rem 72px; }
  .topbar         { padding: 0 .75rem; }
  .topbar-nav     { display: none; }
  .topbar-username { display: none; }           /* hide username, keep sign-out */
  .topbar-saved   { padding: .15rem .45rem; font-size: .72rem; }  /* tighter pill, room's freed by hidden username */

  /* Bottom nav */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    z-index: 100;
    justify-content: space-around;
    align-items: stretch;
  }

  /* Cards */
  /* overflow-y: hidden is required alongside overflow-x: auto — otherwise
     the browser computes overflow-y as auto too (per spec, an axis left
     "visible" next to a scrolling axis becomes auto), making the card its
     own vertical scroll region instead of passing that scroll through to
     the page, so wide tables (Referees, Predictors, review queues) dragged
     both directions instead of just horizontally. */
  .card           { padding: .9rem 1rem; overflow-x: auto; overflow-y: hidden; }
  .section-header { flex-wrap: wrap; gap: .4rem; }
  .section-header h2 { font-size: 1rem; }

  /* Leaderboard — hide Correct + Predictions columns on mobile */
  .leaderboard th:nth-child(4),
  .leaderboard td:nth-child(4),
  .leaderboard th:nth-child(5),
  .leaderboard td:nth-child(5) { display: none; }
  .leaderboard th, .leaderboard td { padding: .5rem .5rem; }
  .points-big { font-size: 1.05rem; }

  /* Stack each fixture's time/match onto one compact line, tip input on its
     own full-width line below — frees up horizontal room for the referee
     search box instead of squeezing 3 columns side by side. */
  .tip-grid thead { display: none; }
  .tip-grid, .tip-grid tbody { display: block; width: 100%; }
  .tip-grid tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    padding: .4rem 0;
  }
  .tip-grid td {
    display: block;
    padding: 0 !important;
    border-bottom: none !important;
    white-space: normal !important;
  }
  .tip-grid td:last-child { flex-basis: 100%; padding-top: .35rem !important; }
  .tip-grid tbody:not(:last-child) tr:last-child { border-bottom: 1px solid var(--border); padding-bottom: .5rem; margin-bottom: .1rem; }

  /* Tip-entry row (chip/search input + pts badge + hedge button): kept on one
     line, same as desktop (see .tip-row-grid above) — the name column shrinks
     to fit (minmax(0,1fr)) and .tip-chip span already ellipsizes long names,
     so it only needs a second line when the error/saved message actually
     appears (handled by tip-col-full's own grid auto-placement, not an
     explicit row here). An earlier version forced every row onto two lines
     unconditionally, which wasted vertical space for the common case of a
     short name. */

  /* Multi-column inline-styled form grids (intel form, admin add-referee/add-user) */
  .grid-3col { grid-template-columns: 1fr !important; }

  /* Tabs — Admin alone has 10, wider than any phone screen. Un-scoped
     overflow let the tab bar force the *entire page* to widen past the
     viewport (browser shrank everything to fit) instead of just itself
     scrolling, so most tabs were unreachable and the whole app looked
     zoomed out. Scope the scroll to the bar itself. */
  .tab-btn { padding: .4rem .55rem; font-size: .78rem; white-space: nowrap; }
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* Round table (all tips & scores) */
  .round-table         { font-size: .78rem; }
  .round-table th,
  .round-table td      { padding: .35rem .45rem; }

  /* By-round breakdown */
  .by-round-table      { font-size: .75rem; }
  .by-round-table th,
  .by-round-table td   { padding: .3rem .4rem; }

  /* Tips accordion */
  .tips-round-header   { gap: .25rem; padding: .6rem .75rem; }
}

/* ── Sponsor, footer, About, first-time welcome ─────────────────────────── */
.topbar-sponsor {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

.site-footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 1.5rem 1rem 2rem;
}

.about-links { margin-left: 1.2rem; font-size: .9rem; }
.about-history p { margin-bottom: .8rem; line-height: 1.6; }
.about-motto { font-weight: 800; letter-spacing: .5px; }
.about-logo { display: block; height: 240px; max-width: 100%; width: auto; object-fit: contain; margin: 1.5rem auto 0; }

.welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.welcome-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  padding: 1.5rem;
  text-align: center;
}
.welcome-card p { margin-bottom: .9rem; line-height: 1.6; text-align: left; }
.welcome-card h2 { margin-bottom: .75rem; }
.welcome-logo { height: 190px; max-width: 70%; object-fit: contain; margin-bottom: .5rem; }

/* ── Wide prediction grids (20+ predictors) ──────────────────────────────────
   Inside the horizontally scrolling wrapper, the fixture/official columns and the
   viewer's own column (my-col, always first predictor) stay pinned while the other
   predictors scroll underneath. Column widths come from --c1/--c2 set per table. */
/* Pinned columns need separate borders: with collapsed borders the hairline between two columns belongs to neither cell,
   so a sliver of the colours scrolling underneath showed through beside the viewer's pinned column. */
.sticky-cols { border-collapse: separate; border-spacing: 0; }
.sticky-cols th:nth-child(1), .sticky-cols td:nth-child(1) {
  position: sticky; left: 0; z-index: 2; background: var(--white);
}
.sticky-cols th:nth-child(2), .sticky-cols td:nth-child(2) {
  position: sticky; left: var(--c1); z-index: 2; background: var(--white);
}
.sticky-cols th.my-col, .sticky-cols td.my-col {
  position: sticky; left: calc(var(--c1) + var(--c2)); z-index: 2;
  box-shadow: 2px 0 3px rgba(0,0,0,0.12);
}
.sticky-cols th.my-col, .sticky-cols td.my-col:not([class*="cell-"]) { background: var(--white); }
.sticky-cols tfoot td[colspan="2"] { position: sticky; left: 0; z-index: 2; background: var(--white); }
.sticky-cols thead th { background: var(--green); }
.sticky-cols thead th:nth-child(1), .sticky-cols thead th:nth-child(2), .sticky-cols thead th.my-col { background: var(--green); }

.about-links li { margin-bottom: .35rem; }
.about-links li.about-current { font-weight: 700; }
.about-current-badge {
  display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--green); color: var(--white); font-size: .7rem; font-weight: 700; vertical-align: middle;
}

.sticky-cols th:nth-child(1), .sticky-cols td:nth-child(1):not([colspan]) { width: var(--c1); min-width: var(--c1); max-width: var(--c1); }
.sticky-cols th:nth-child(2), .sticky-cols td:nth-child(2):not([colspan]) { width: var(--c2); min-width: var(--c2); max-width: var(--c2); }

/* ── Phones: leave room to scroll. Pin only the fixture and the viewer's own
   column (the Official column scrolls with the rest), and stack each pick's
   name above its points so a 80px column never overflows into its neighbour. ── */
@media (max-width: 640px) {
  .sticky-cols { --c1: 84px !important; --c2: 94px !important; }
  .sticky-cols th:nth-child(2), .sticky-cols td:nth-child(2) { position: static; }
  .sticky-cols th.my-col, .sticky-cols td.my-col { left: var(--c1); }
  .sticky-cols th:nth-child(1), .sticky-cols td:nth-child(1) { font-size: .72rem; }
  .round-table th.predictor-col, .round-table td.predictor-col { min-width: 84px; width: 84px; max-width: 84px; }
  .sticky-cols td.predictor-col > div { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
  .sticky-cols td.predictor-col > div > span { white-space: normal !important; font-size: .74rem !important; margin-left: 0 !important; }
  .sticky-cols td.predictor-col > div > span:last-child { font-size: .68rem !important; font-weight: 700; }
}

/* ── Phone 'More' sheet and sponsor line ────────────────────────────────── */
.more-overlay, .more-sheet { display: none; }
.topbar-brand-text { display: flex; flex-direction: row; align-items: baseline; gap: .5rem; line-height: 1.1; }
@media (max-width: 640px) {
  .more-overlay { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.25); }
  .more-sheet {
    display: flex; flex-direction: column;
    position: fixed; right: .5rem; bottom: 64px; z-index: 160;
    min-width: 11rem; background: var(--white); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .more-sheet a { padding: .8rem 1.1rem; font-weight: 600; font-size: .95rem; color: var(--text); border-bottom: 1px solid var(--border); }
  .more-sheet a:last-child { border-bottom: none; }
  .more-sheet a.active { color: var(--green); background: var(--green-light); }
  .more-sheet a:hover { text-decoration: none; }
  .topbar-brand-text { flex-direction: column; align-items: flex-start; gap: 0; }
  .topbar-sponsor { display: block; font-size: .62rem; }
  .site-footer { padding-bottom: 76px; }
}

/* Admin appointments table on phones: keep the match label pinned while the role dropdowns scroll */
@media (max-width: 640px) {
  .appt-table th:first-child, .appt-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--white);
    min-width: 108px !important; box-shadow: 2px 0 3px rgba(0,0,0,0.10);
  }
  .appt-table thead th:first-child { background: var(--green); }
}

/* Admin referee panel: phones show only name, tier and the add/remove button */
@media (max-width: 640px) {
  .round-table .hide-sm { display: none; }
  .btn .hide-sm { display: none; }
  .show-sm, .btn .show-sm { display: inline; }
}
.show-sm { display: none; }

/* Hover fix: the generic `button:hover:not(:disabled)` rule (green fill) out-ranked these, so a hovered
   tab or ghost button turned green on green and its label vanished. */
.tab-btn:hover:not(:disabled)     { background: none; color: var(--green); }
.btn-ghost:hover:not(:disabled)   { background: var(--green-light); color: var(--green); }
.btn-danger:hover:not(:disabled)  { background: #b91c1c; }

/* Delayed game: highlighted so it is not mistaken for a normal fixture of the round */
.fixture-delayed { background: #fffbeb; }
.delayed-badge {
  display: inline-block; margin-left: .5rem; padding: 1px 8px; border-radius: 999px;
  background: #d97706; color: #fff; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; vertical-align: middle;
}
.delayed-note td { font-size: .75rem; color: #92400e; padding: .35rem .5rem .1rem !important; border-bottom: none !important; }

/* Welcome / confirm dialogs: centred on screen, and still fully reachable when the content is taller than the screen */
.welcome-overlay { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; }
.welcome-card { margin: auto; width: 100%; }

/* Shown wherever a password is created or changed */
.password-warning {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #d97706;
  border-radius: 4px;
  padding: 0.45rem 0.65rem;
  margin-top: 0.5rem;
}

/* Top bar: keep labels on one line, and tighten up on mid-width screens (tablets, small laptops) */
.topbar-nav a, .topbar-user button, .topbar-username { white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1100px) {
  .topbar-nav a { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  .topbar-username { display: none; }
  .topbar { padding: 0 1rem; }
}

/* Archive */
.archive-tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.champion-banner { text-align:center; padding:1.2rem 1rem; margin-bottom:1rem; border-radius:12px; background:linear-gradient(135deg,#fef3c7,#fde68a); border:1px solid #f59e0b; color:#78350f; }
.champion-label { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.champion-name { font-size:1.8rem; font-weight:800; margin:.15rem 0; }
.champion-pts { font-size:.85rem; }
.archive-actions .btn { width:auto; }
.archive-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 2rem; }

/* Tips Due: email me a copy of my tips */
.tips-copy { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:0 0 1rem; }
.tips-copy { gap:.4rem; }
.tips-copy .btn { width:auto; font-size:.72rem; padding:.3rem .6rem; min-height:0; line-height:1.3; }
.tips-copy-msg { font-size:.85rem; color:var(--green); }
.tips-copy-msg.is-error { color:var(--red); }

/* Intel board rule */
.intel-rule { font-size:1rem; color:var(--text); margin:-.25rem 0 1rem; }
.intel-rule a { color:var(--green); text-decoration:underline; }

/* ── Post intel form: one-line round picker and roomier date boxes ─────────────────── */
.intel-round-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: 0.55rem 0.75rem; text-align: left; cursor: pointer;
  background: var(--white); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 0.95rem; font-weight: 400; font-family: inherit;
}
.intel-round-btn:hover:not(:disabled) { background: var(--white); border-color: var(--green); color: var(--text); }
.intel-round-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-round-text.placeholder { color: var(--text-muted); }
.intel-round-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 150;
  max-height: 11rem; overflow-y: auto;
  background: var(--white); border: 1.5px solid var(--green); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .25rem 0;
}
.intel-round-list label {
  display: flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .75rem;
  font-size: .9rem; font-weight: 400; cursor: pointer;
}
.intel-round-list label:hover { background: var(--green-light); }
input[type="date"].intel-date {
  width: 100%; padding: 0.55rem 0.75rem; min-height: 2.6rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 0.95rem; font-family: inherit; color: var(--text); background: var(--white);
}
input[type="date"].intel-date:focus { outline: none; border-color: var(--green); }

/* ── Intel board: collapsed 'how intel emails work' note ───────────────────────────── */
.intel-help { padding: .6rem 1rem; }
.intel-help summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--green-dark); }
.intel-help ul { margin: .6rem 0 .4rem 1.1rem; font-size: .88rem; }
.intel-help li { margin-bottom: .35rem; }
.intel-help p { font-size: .85rem; color: var(--text-muted); margin: .3rem 0 0; }

/* ── Phones: a thin line between games, and the delayed game as a tidy amber card ─────────────────── */
@media (max-width: 640px) {
  .tip-grid tbody { border-bottom: 1px solid #d1d5db; padding: .15rem 0; }
  .tip-grid tbody:last-child { border-bottom: none; }
  .tip-grid tbody:not(:last-child) tr:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: .4rem; }
  .tip-grid tr { padding: .45rem 0 .1rem; }
  .tip-grid tbody.fixture-delayed {
    box-shadow: none; border: none;
    border-radius: 6px; padding: .15rem .5rem; margin: .25rem -.5rem;
  }
  .delayed-note td { padding: .35rem 0 .15rem !important; line-height: 1.35; }
}

/* ── Phones: My Predictions and Due This Week tip rows get side padding, and full-width notes fill the row ───── */
@media (max-width: 640px) {
  /* breathing room on the left and right of every row inside a round box */
  .season-round-section .tip-grid tr { padding-left: .85rem; padding-right: .85rem; }
  .season-round-section .tip-grid tbody.fixture-delayed { width: auto; margin: .25rem 0; padding: .15rem 0; }
  .season-round-section .tip-grid tbody.fixture-delayed tr { padding-left: .85rem; padding-right: .85rem; }
  /* full-width rows (intel warning, delayed note) fill the row instead of shrinking to their text */
  .tip-grid tr > td[colspan="3"] { flex: 1 1 100%; box-sizing: border-box; min-width: 0; }
  .tip-grid td.clash-cell { padding: .55rem .75rem !important; border-radius: 6px; margin: .1rem 0 .35rem; }
  /* hedge row: label on the left, tip box underneath */
  .tip-grid tr > td[colspan="2"] { text-align: left !important; flex: 1 1 100%; padding-bottom: .15rem !important; }
}

/* ── Who has locked in (Due This Week): a status instead of a pick ─────────────────────────── */
.round-table td.status-in  { background: #dcfce7; color: #166534; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.round-table td.status-out { background: #f3f4f6; color: #6b7280; font-size: .78rem; white-space: nowrap; }
.round-table tr:hover td.status-in  { background: #bbf7d0; }
.round-table tr:hover td.status-out { background: #e5e7eb; }

/* ── Admin > Appointments: 'released before the deadline' cut-off ───────────────────────────── */
.cutoff-box { margin-top: .9rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fffbeb; }
.cutoff-tick { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; margin: 0; }
.cutoff-help { font-size: .8rem; color: var(--text-muted); margin: .4rem 0 .5rem; }
.cutoff-result { font-size: .85rem; margin-top: .5rem; padding: .5rem .7rem; background: var(--white); border: 1px solid var(--border); border-radius: 6px; }
.cutoff-result p { margin: 0 0 .25rem; }
.cutoff-result ul { margin: .25rem 0 0 1.1rem; padding: 0; }

/* ── Admin > Predictors: delegated access boxes ───────────────────────────────────────────── */
.perm-boxes { display: grid; grid-template-columns: repeat(2, auto); gap: .15rem .6rem; justify-content: start; }
.perm-box { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .78rem; font-weight: 400; cursor: pointer; white-space: nowrap; }

/* Who-has-locked-in grid: plain scrolling table, only the fixture column pinned, members in the usual order */
.status-table { table-layout:auto; width:100%; }
.status-table th.predictor-col, .status-table td.predictor-col { width:auto; min-width:7.6rem; padding-left:.6rem; padding-right:.6rem; }
.status-table th.predictor-col { text-align:center; }
.status-table th.my-col { text-decoration:underline; }
.status-table th:nth-child(1), .status-table td:nth-child(1) { position:sticky; left:0; z-index:2; background:var(--white); width:var(--c1); min-width:var(--c1); max-width:var(--c1); padding-left:.5rem; padding-right:.4rem; box-shadow:2px 0 0 rgba(0,0,0,.08); }
.status-table thead th:nth-child(1) { background:var(--green); }

/* Points chart: tall on desktop, shorter on phones */
.chart-box { position:relative; height:560px; }
@media (max-width: 640px) { .chart-box { height:340px; } }

/* ── Shop ─────────────────────────────────────────────────────────────── */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.shop-product { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.25rem; padding: 1rem; }
.shop-banner { grid-column: 1 / -1; background: #fffbeb; border: 1.5px solid #f59e0b; border-radius: var(--radius); padding: .65rem .9rem; font-size: .9rem; font-weight: 600; color: #92400e; line-height: 1.45; }
.shop-img { width: 100%; border-radius: 8px; background: #1f2a37; display: block; }
.shop-info h3 { margin: .3rem 0 .1rem; font-size: 1.15rem; }
.shop-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.shop-tagline { color: #92400e; font-weight: 600; font-size: .85rem; margin: 0 0 .5rem; }
.shop-desc { font-size: .9rem; line-height: 1.55; margin: 0 0 .9rem; }
.shop-buy { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.shop-price { font-size: 1.5rem; font-weight: 800; }
.shop-price small { font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.shop-small { font-size: .78rem; color: var(--text-muted); margin: .6rem 0 0; }
.shop-cart { position: sticky; top: 4.5rem; }
.shop-line { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.shop-line-name { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.shop-line-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.shop-line-total { margin-left: auto; font-weight: 700; }
.shop-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.shop-qty button { width: 2rem; height: 2rem; border: 0; background: #f3f4f6; font-size: 1rem; cursor: pointer; color: var(--text); }
.shop-qty button:disabled { opacity: .4; cursor: default; }
.shop-qty span { min-width: 2rem; text-align: center; font-weight: 700; }
.shop-total { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0 .6rem; font-size: 1.05rem; }
.shop-checkout { width: 100%; }
.shop-thanks { background: #f0fdf4; border-color: #86efac; margin-bottom: 1rem; line-height: 1.5; }
.shop-closed { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: .6rem .9rem; border-radius: 8px; font-size: .88rem; }
.shop-error { color: var(--red); font-size: .88rem; }
@media (max-width: 860px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-cart { position: static; }
}
@media (max-width: 560px) {
  .shop-product { grid-template-columns: minmax(0, 1fr); }
}

/* Post / edit intel: the description comes first, everything else sits under 'Details (optional)' */
.intel-details { margin-top: .25rem; }
.intel-details > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--green); padding: .35rem 0; list-style: revert; }
.intel-details-body { padding-top: .75rem; }

/* Admin > Predictors: the table scrolls inside its card instead of poking out, and the buttons stack evenly */
.users-scroll { overflow-x: auto; max-width: 100%; min-width: 0; }
.users-table { width: 100%; min-width: 0; }
.users-table td, .users-table th { padding-left: .4rem; padding-right: .4rem; }
.users-table td:nth-child(4) { word-break: break-all; font-size: .8rem; }
.users-table td { vertical-align: top; }
.user-actions { display: flex; flex-direction: column; gap: .3rem; }
.user-actions .btn { white-space: nowrap; min-width: 6.2rem; }
/* Save buttons that sit beside inputs need room */
.btn-save { padding: .5rem 1.4rem; margin-top: .25rem; }

/* Post/edit intel: Single day / Range switch above the date boxes */
.intel-datemode { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Post/edit intel: pick rounds OR dates; whichever is not in use is greyed out */
.intel-greyed { opacity: .45; pointer-events: none; }

/* Post/edit intel: dates with a 'Single day' tick box beside them */
.intel-dates-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: .75rem; }
.intel-dates-row .field { flex: 1 1 9rem; }
.intel-single { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; padding: .5rem .75rem; border: 1.5px solid var(--green); border-radius: var(--radius); background: var(--green-light); cursor: pointer; white-space: nowrap; }
.intel-single input { width: auto; margin: 0; }

/* ── Add to Home Screen page ─────────────────────────────────────────── */
.install-page { max-width: 640px; }
.install-lead { font-size: .95rem; margin-bottom: 1rem; }
.install-done { background: var(--green-light); border: 1.5px solid var(--green); border-radius: var(--radius); padding: .8rem 1rem; font-weight: 600; }
.install-choice { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.install-detected { font-size: .82rem; color: var(--text-muted); margin-bottom: .75rem; }
.install-warn { background: #fffbeb; border: 1.5px solid #f59e0b; border-radius: var(--radius); padding: .7rem .9rem; font-size: .88rem; margin-bottom: .9rem; }
.install-android-btn { margin: .5rem 0 1rem; }
.install-note { font-size: .85rem; color: var(--text-muted); margin: .5rem 0 .9rem; }
.install-steps { list-style: none; padding: 0; margin: 0 0 .5rem; }
.install-steps li { display: flex; gap: .8rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.install-steps li:first-child { border-top: 0; }
.install-step-num { flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.install-step-body { flex: 1; min-width: 0; }
.install-step-body p { font-size: .95rem; margin: .3rem 0 .5rem; }
.install-step-img { display: block; max-width: 100%; max-height: 420px; border: 1px solid var(--border); border-radius: var(--radius); }

/* ── Home: every section is its own card ───────────────────────────────── */
.home-section { margin: 0 0 .75rem; }
.home-section-title { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.home-section-note { font-size: .8rem; color: var(--text-muted); margin: 0 0 .6rem; }
.export-option { margin-bottom: 1.1rem; }
.export-option .btn { width: auto; }
.export-help { font-size: .85rem; color: var(--text-muted); margin: .35rem 0 0; }

/* All Predictions: a closed round shows its grid first, then its delayed game that is still open for tipping */
.round-body-flex { display: flex; flex-direction: column; }

.delayed-badge.delayed-badge-cell { display: block; width: max-content; max-width: 100%; margin: .2rem 0 .1rem; white-space: normal; line-height: 1.25; text-align: left; }

/* several match officials on one intel notice */
.intel-ref-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.intel-ref-chips .intel-chip { display: inline-flex; align-items: center; gap: .3rem; }
.intel-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .1rem; opacity: .7; }
.intel-chip-x:hover { opacity: 1; }

/* Admin > Appointments scrolls to the next round: leave room for the sticky top bar */
.appt-round-card { scroll-margin-top: 5rem; }

/* Outer border on data tables, matching the lines inside them */
.round-table, .tip-grid, .by-round-table { border: 1px solid var(--border); }

/* Tables inside a sideways-scrolling wrapper: the border sits on the wrapper so the left and right edges stay put while the table scrolls */
div[style*="overflow-x:auto"]:has(> table) { border: 1px solid var(--border); }
div[style*="overflow-x:auto"] > table { border: 0; }

/* Who-has-locked-in grid: the viewer's own column sits straight after the fixture and stays pinned, like the results grid */
.status-table th.my-col, .status-table td.my-col { position:sticky; left:var(--c1); z-index:2; box-shadow:2px 0 3px rgba(0,0,0,.12); }
.status-table thead th.my-col { background:var(--green); }
.status-table tfoot td.my-col { background:var(--white); }

/* Same fix as .sticky-cols: with collapsed borders a sliver of the scrolling columns showed beside the pinned viewer column */
.status-table { border-collapse: separate; border-spacing: 0; }
/* fixture labels wrap instead of being cut off ('NEW vs MAC' was clipped) */
.sticky-cols th:nth-child(1), .sticky-cols td:nth-child(1), .status-table th:nth-child(1), .status-table td:nth-child(1) { white-space: normal !important; overflow-wrap: anywhere; }

/* Desktop keeps the fixture on one line (the column is wide enough); phones keep it narrow and let it wrap */
@media (min-width: 641px) {
  .sticky-cols td:nth-child(1) > span:first-child, .status-table td:nth-child(1) > span:first-child { white-space: nowrap; }
}
@media (max-width: 640px) { .status-table { --c1: 92px !important; } }

/* Phones: the viewer's own column is no longer pinned. It is still the first member column, so it is seen on
   opening, and scrolls away like the others. Only the fixture (and Official, where shown) stay pinned. */
@media (max-width: 640px) {
  .sticky-cols th.my-col, .sticky-cols td.my-col,
  .status-table th.my-col, .status-table td.my-col { position: static; box-shadow: none; }
  /* Who-has-locked-in: narrower member columns, wide enough for the longest name plus a little margin */
  .status-table th.predictor-col, .status-table td.predictor-col { min-width: 5.4rem; padding-left: .3rem; padding-right: .3rem; }
  .status-table th.predictor-col { font-size: .76rem; }
}
@media (min-width: 641px) {
  .status-table th.predictor-col, .status-table td.predictor-col { min-width: 6.8rem; }
}

/* ── Phones: less wasted space (padding stacked on padding stacked on borders) ─────────────────── */
@media (max-width: 640px) {
  .main-content { padding: .5rem .5rem 72px; }
  .card { padding: .6rem .65rem; margin-bottom: .6rem; }
  .home-section { margin: 0 0 .5rem; }
  /* the card already frames its tables, so no second box inside it */
  .card .tip-grid, .card .round-table, .card .by-round-table,
  .card div[style*="overflow-x:auto"]:has(> table) { border: 0; }
  /* the tip box takes the whole row until a pick adds its points and hedge button (empty columns take no room) */
  .tip-row-grid, .tip-row-grid-hedge { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .3rem; }
  .season-round-section .tip-grid tr,
  .season-round-section .tip-grid tbody.fixture-delayed tr { padding-left: .4rem; padding-right: .4rem; }
  /* the round header's 'Closes: ...' line drops under the name instead of pushing the page wider */
  .season-round-header { flex-wrap: wrap; row-gap: .2rem; padding-left: .65rem; padding-right: .65rem; }
  .season-deadline { flex: 1 1 100%; white-space: normal; font-size: .75rem; }
}

.bonus-chip { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .7rem; font-weight: 700; cursor: help; white-space: nowrap; }

/* finals tip entry: one row per role */
.finals-tip { padding: .25rem 0; }
.finals-tip-note { font-size: .8rem; color: var(--text-muted); margin: 0 0 .6rem; }
.finals-game { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: .6rem .75rem; margin-bottom: .75rem; }
.finals-game-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .5rem; }
.finals-game-when, .finals-game-count { font-size: .78rem; color: var(--text-muted); }
.finals-game-count { margin-left: auto; }
.finals-role-heading { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin: .6rem 0 .2rem; }
.finals-role-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .2rem 0; }
.finals-role-label { font-size: .85rem; font-weight: 600; padding-top: .35rem; }
.finals-role-ctl { min-width: 0; }
.finals-role-ctl .tip-chip-wrap { display: inline-block; position: relative; }
.finals-clash { font-size: .78rem; color: #78350f; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 6px; padding: .3rem .5rem; margin-top: .25rem; }
.finals-locked { font-size: .85rem; color: var(--text-muted); margin: 0; }
@media (max-width: 640px) { .finals-role-row { grid-template-columns: 4.6rem minmax(0, 1fr); } }

/* intel: edit history */
button.intel-history-btn, .intel-meta button.intel-history-btn { width: auto; margin-left: .6rem; font-size: .72rem; font-weight: 600; padding: 1px 9px; border: 1px solid #1a7a4a; border-radius: 999px; background: #fff; color: #1a7a4a; cursor: pointer; font-style: normal; }
button.intel-history-btn:hover { background: #dcfce7; color: #14532d; }
.intel-history { margin-top: .4rem; padding: .5rem .7rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .8rem; }
.intel-history ol { list-style: none; margin: 0; padding: 0; }
.intel-history li { padding: .35rem 0; border-bottom: 1px dotted #e5e7eb; }
.intel-history li:last-child { border-bottom: 0; }
.ih-when { color: #374151; }
.ih-change { margin-top: .15rem; overflow-wrap: anywhere; }
.ih-field { color: #6b7280; }
.intel-history del { color: #991b1b; background: #fee2e2; text-decoration: line-through; }
.intel-history ins { color: #166534; background: #dcfce7; text-decoration: none; }

.intel-archived-heading { font-size: .85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 1.4rem 0 .5rem; }

/* Match details popup */
.fx-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.fx-link:hover { color: var(--green, #166534); }
.fx-box { max-width: 560px; width: calc(100% - 1.5rem); max-height: 88vh; overflow-y: auto; text-align: left; }
.fx-sec { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: .9rem 0 .35rem; font-weight: 700; }
.fx-empty { font-size: .8rem; color: var(--text-muted); }
.fx-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.fx-table th, .fx-table td { padding: .2rem .35rem; text-align: right; border-bottom: 1px solid #eee; }
.fx-table th:nth-child(2), .fx-table td:nth-child(2) { text-align: left; }
.fx-table tr.fx-hl td { background: #ecfdf5; font-weight: 600; }
.fx-form-row { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; flex-wrap: wrap; }
.fx-form-team { min-width: 3rem; font-weight: 600; font-size: .85rem; }
.fx-chip { display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 50%; font-size: .75rem; font-weight: 700; color: #fff; }
.fx-W { background: #16a34a; } .fx-D { background: #9ca3af; } .fx-L { background: #dc2626; }
.fx-meet { padding: .45rem 0; border-bottom: 1px solid #eee; font-size: .85rem; }
.fx-officials { display: flex; flex-wrap: wrap; gap: .15rem .8rem; font-size: .78rem; margin-top: .15rem; }
.fx-role { color: var(--text-muted); }

/* Flag beside an official when the appointment changed or the referee was replaced */
.note-mark { margin-left:.2rem; color:#b45309; font-weight:700; cursor:help; font-size:.85rem; }
.grid-notes { font-size:.72rem; color:var(--text-muted); margin:.2rem 0 .5rem; padding:0 .75rem; line-height:1.4; }
.grid-notes sup { color:#b45309; font-weight:700; font-size:.85rem; }

/* Insights tab and the notes under each game on Home */
.insights-intro { margin: -.25rem 0 .75rem; color: var(--text-muted); font-size: .9rem; }
.insights-week .insights-calendar { font-size: .88rem; display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
.insights-chip { background: #eef2f7; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; }
.insights-game-head { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .35rem; }
.insights-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: .6rem 0 .15rem; }
.insights-list { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.insight-note-line { font-size: .9rem; margin: .2rem 0; }
.insights-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.insights-table th, .insights-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border, #e5e7eb); vertical-align: top; }
.insights-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.insights-recent td { background: #f8faf8; }
@media (max-width: 640px) { .insights-table th, .insights-table td { padding: .3rem .35rem; } }

.tabs.tabs-sub { margin-top: -.25rem; }
.tabs.tabs-sub .tab-btn { font-size: .85rem; }

.insights-summary-game { padding: .6rem 0; border-top: 1px solid var(--border, #e5e7eb); }
.insights-summary-game:first-of-type { border-top: 0; }
.insights-summary-title { font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.insights-summary-line { display: flex; gap: .6rem; font-size: .85rem; color: var(--text-muted); }
.insights-summary-line > span:first-child { flex: 0 0 6.5rem; }
.insights-summary-line > span:last-child { color: var(--text); }
.insights-summary-note { font-size: .85rem; color: var(--text-muted); }
.insights-summary-date { font-size: .85rem; padding: .1rem 0; }
button.fx-chip { border: 0; cursor: pointer; padding: 0; margin: 0; width: 1.5rem; min-width: 1.5rem; max-width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-family: inherit; font-size: .75rem; font-weight: 700; color: #fff; flex: 0 0 1.5rem; box-shadow: none; }
.fx-chip-on { outline: 2px solid var(--text); outline-offset: 1px; }
.fx-form-detail { flex-basis: 100%; font-size: .78rem; color: var(--text-muted); padding-left: 3.3rem; }

.insights-tools { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.insights-tools input[type=text] { flex: 1 1 14rem; min-width: 0; margin: 0; height: 2.5rem; }
.insights-tools label { display: flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; font-size: .9rem; }
.insights-tools select { margin: 0; height: 2.5rem; width: auto; }

.insights-view .card p { margin: 0 0 .75rem; }
.insights-view .card ul.insights-list { margin-bottom: .75rem; }
.insights-view .insights-table { margin-top: .5rem; }
.insights-view .insights-label + .insights-table { margin-top: .25rem; }

/* Insights: clearer headings, indented detail, rows colour coded by season */
.insights-view .insights-block { margin-top: 1rem; }
.insights-view .insights-heading { font-size: .95rem; font-weight: 700; color: var(--text); padding-bottom: .25rem; border-bottom: 2px solid var(--border, #e5e7eb); margin-bottom: .45rem; }
.insights-view .insights-block-body { padding-left: 1.25rem; }
.insights-view .insights-block-body p { margin: 0; }
.insights-meet { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .6rem; align-items: center; padding: .3rem .6rem; margin-bottom: .25rem; border-left: 4px solid var(--ssn, #9ca3af); background: var(--ssn-bg, #f3f4f6); border-radius: 4px; font-size: .88rem; }
.insights-meet-date { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.insights-season-chip { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--ssn); color: #fff; white-space: nowrap; }
.ssn-0 { --ssn: #2563eb; --ssn-bg: #eff6ff; }
.ssn-1 { --ssn: #16a34a; --ssn-bg: #f0fdf4; }
.ssn-2 { --ssn: #d97706; --ssn-bg: #fffbeb; }
.ssn-3 { --ssn: #9333ea; --ssn-bg: #faf5ff; }
.ssn-4 { --ssn: #dc2626; --ssn-bg: #fef2f2; }
.ssn-5 { --ssn: #0d9488; --ssn-bg: #f0fdfa; }
@media (max-width: 640px) {
  .insights-meet { grid-template-columns: 1fr auto; }
  .insights-meet-date { grid-column: 1 / -1; }
  .insights-view .insights-block-body { padding-left: .6rem; }
}

/* Insights: roomier cards, more prominent headings */
.insights-view .card { padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; }
.insights-view .card-title { font-size: 1.3rem; font-weight: 800; margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 3px solid var(--primary, #166534); }
.insights-view .insights-label { font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); margin: 1.6rem 0 .6rem; padding-left: .6rem; border-left: 4px solid var(--primary, #166534); }
.insights-view ul.insights-list { padding-left: 1.4rem; line-height: 1.6; }
.insights-view ul.insights-list li { margin-bottom: .45rem; }
.insights-view .insights-table th, .insights-view .insights-table td { padding: .6rem .75rem; }
.insights-view .insights-table { margin: .6rem 0 1.25rem; }
.insights-view .insights-table th { background: var(--bg, #f9fafb); }
.insights-view .insights-heading { font-size: 1.05rem; margin-top: .4rem; }
.insights-view .card p.text-muted { margin-bottom: 1rem; }
@media (max-width: 640px) { .insights-view .card { padding: 1rem .9rem; } .insights-view .card-title { font-size: 1.15rem; } }

/* Insights game cards: quieter headings; meetings as columns coloured by season */
.insights-view .insights-game .insights-heading { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border, #e5e7eb); }
.insights-meet { grid-template-columns: 5rem 7rem 6.5rem 7rem 1fr; }
.insights-meet-head { background: none; border-left-color: transparent; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
@media (max-width: 640px) {
  .insights-meet { grid-template-columns: 1fr 1fr; row-gap: .1rem; }
  .insights-meet-head { display: none; }
  .insights-meet-date { grid-column: auto; }
  .insights-meet-ref { grid-column: 1 / -1; }
}
.insights-stat { display: flex; justify-content: space-between; gap: 1rem; max-width: 28rem; padding: .25rem 0; border-bottom: 1px solid var(--border, #e5e7eb); font-size: .9rem; }

/* Insights: collapsed model explainer */
.insights-model > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.insights-model > summary::-webkit-details-marker { display: none; }
.insights-model > summary::after { content: '+'; float: right; font-weight: 400; }
.insights-model[open] > summary::after { content: '-'; }
.insights-model[open] > summary { margin-bottom: .9rem; }
.insights-switch { display: flex; gap: .5rem; margin-bottom: .75rem; }

/* Insights: adjustable model */
.model-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .6rem; }
.model-chip { border: 1px solid var(--border, #e5e7eb); background: #fef2f2; color: #991b1b; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; cursor: pointer; }
.model-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .8rem; }
.model-controls select { min-width: 14rem; height: 2.5rem; }
.model-top td { background: #f0fdf4; }
.model-tag { margin-left: .5rem; background: #16a34a; }
.insights-view .model-chip { width: auto; flex: 0 0 auto; }
.insights-view .model-controls select { width: auto; flex: 1 1 14rem; max-width: 22rem; }
.insights-view .model-controls .btn { width: auto; }

/* suggested pick in a tip box */
.typeahead-item.tip-suggested { background: #f3f4f6; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
.typeahead-item.tip-suggested strong { font-weight: 600; }
input.grid-input::placeholder { color: #9ca3af; }

/* Admin referees: on phones the first name, last name, role and panel fields sit under the row behind an 'Edit' button */
.detail-row-sm, .show-sm-btn { display: none !important; }
.ref-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .25rem 0 .5rem; }
.ref-detail-grid label { display: flex; flex-direction: column; font-size: .72rem; color: var(--text-muted); gap: .15rem; }
.ref-detail-grid input, .ref-detail-grid select { width: 100%; font-size: .85rem; padding: .3rem .4rem; }
@media (max-width: 640px) {
  .detail-row-sm { display: table-row !important; }
  .detail-row-sm[style*="display: none"] { display: none !important; }
  .show-sm-btn { display: inline-flex !important; }
}

/* Home: collapsible Insights card (closed by default) */
.home-collapse > summary { cursor: pointer; margin-bottom: 0; }
.home-collapse[open] > summary { margin-bottom: .25rem; }

/* Wide tables scroll sideways inside their card instead of poking out of it */
.table-scroll { overflow-x: auto; max-width: 100%; }

/* Narrow desktop windows: the Tip cell never pokes out past the table */
@media (min-width: 641px) {
  .tip-grid td:nth-child(3) { min-width: 0; }
}

/* Model chance shown beside a referee in the tip box list */
.typeahead-item .chance-label { margin-left: auto; padding-left: .5rem; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.typeahead-item .chance-label + .pts-label { margin-left: .5rem; }

/* Admin > Appointments: what a pasted or edited box does to what is saved */
.appt-select.appt-new, input.appt-select.appt-new { background: #dcfce7; border-color: #16a34a; }
.appt-select.appt-changed, input.appt-select.appt-changed { background: #ffedd5; border-color: #ea580c; }
.appt-cap { font-size: .7rem; color: var(--text-muted); text-align: right; padding: 0 2px; line-height: 1.2; }
.appt-cap.appt-cap-new, .appt-cap.appt-cap-changed { font-weight: 700; text-decoration: underline; }
.appt-cap.appt-cap-new { color: #15803d; }
.appt-cap.appt-cap-changed { color: #c2410c; }
.appt-key { padding: 1px 8px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--border); }
.appt-key-new { background: #dcfce7; border-color: #16a34a; }
.appt-key-changed { background: #ffedd5; border-color: #ea580c; }
.appt-key-cap { color: #15803d; font-weight: 700; text-decoration: underline; }
.appt-th-extra { background: #4b5563; }
.appt-cell-row { display: flex; align-items: center; gap: 3px; }
.appt-cell-row input.appt-select { flex: 1 1 auto; min-width: 6.5rem; }
.appt-cell-row .appt-cap { flex: 0 0 auto; padding: 0; white-space: nowrap; }