/* <pp-league-finder> — the three panels a leagueless user needs on login.php.
   Width-limited to match .login-card above it so the two read as one column rather
   than a card sitting on top of a full-width page. Padding, borders and the field
   treatment all come from .panel / .body / .row in style.css. */
.league-finder {
  display: block;
  max-width: 560px;
  margin: 0 auto 32px;

  /* .row makes every child flex:1; a Search button and a four-digit year do not want
     half the width each. */
  & .row > .shrink { flex: 0 0 auto; min-width: 0; }

  & .row > .shrink input[type="number"] { width: 7ch; }

  & .finder-results {
    list-style: none;
    margin: 0;
    padding: 0;

    & li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid rgba(44, 81, 56, .5);

      &:last-child { border-bottom: 0; }
    }
  }

  /* min-width:0 so a long league name wraps instead of pushing the button off. */
  & .finder-league { min-width: 0; }

  & .small { font-size: 12px; }

  & button[data-act] { flex: 0 0 auto; }

  & textarea { resize: vertical; }

  & button[data-act="new-league"] { margin-top: 14px; }

  /* Stack on a phone. A button beside a shrinking field is the shape that gets
     mis-tapped, and every row here is field + button. */
  @media (max-width: 480px) {
    & .finder-results li { flex-direction: column; align-items: flex-start; }
  }
}