/* Seagulls Live - finder page. Only what app.css does not already have. */

.finder { display: flex; gap: 8px; margin-top: 14px; }
.finder__box {
  flex: 1; min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 0; border-radius: 12px;
  background: #f4f7fb;
  box-shadow: inset 0 0 0 1px var(--line);
  font: 600 16px var(--body); /* 16px stops iOS zooming in on focus */
  color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.finder__box:focus { outline: 3px solid var(--gold); outline-offset: 1px; background: #fff; }
.finder__go {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  border: 0; border-radius: 12px;
  background: var(--navy); color: #fff;
  font: 800 14px var(--body);
  cursor: pointer;
}
.finder__go:focus-visible, .fbtn:focus-visible, .frow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

#f-nav:empty { display: none; }
body[data-page="find"] main { padding-bottom: 40px; }
.fsec { margin-top: 24px; }

/* A tappable row: a club in the results, a team, a grade. */
.frow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
}
.frow--plain { grid-template-columns: minmax(0, 1fr) auto; }
.frow .logo { width: 40px; height: 40px; }
.frow__name { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--navy); overflow-wrap: anywhere; }
.frow__sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.frow__go { font-size: 20px; font-weight: 800; color: var(--gold); }
.fgroup { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fgroup:first-child { margin-top: 0; }

/* Match cards here hold two links, so the card itself is not one. */
.fcard:hover { transform: none; box-shadow: var(--shadow); }
.fcard__sub { margin: -4px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fcard .card__when { margin: 8px 0 0; }
.fcard__btns { display: flex; gap: 8px; margin-top: 12px; }
.fbtn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--chip); color: var(--navy);
  font-size: 13px; font-weight: 800;
  text-decoration: none;
}
.fbtn:hover { background: #d6dfeb; }
.fbtn--go { flex: 1.4; background: var(--navy); color: #fff; }
.fbtn--go:hover { background: var(--navy-2); }
.fbtn svg { width: 18px; height: 18px; flex: none; }
.card--live .fbtn--go { background: var(--red); }

/* Four links can be a touch wide for a small phone. */
body[data-page="find"] .topnav { flex-wrap: wrap; }