/* League players directory (templates/players/league_players.html) -
   page-specific classes layered on static/css/base.css's shared .hl-*
   components and tokens, same pattern as game_detail.css/league_home.css/
   stat_leaders.css/player_profile.css. Covers the header/count chip, the
   search+filter bar's autocomplete/icon treatment, the single-color player
   monogram, jersey/height detail chips, and the numbered pagination. */

/* ─── Header (title + live results count) ────────────────────────────── */
.lp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.lp-subtitle {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.lp-count-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.lp-count-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

.lp-count-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

/* Same bouncy easing as base.css's .hl-league-nav-item.active "pop" - a
   small nod to the same motion language elsewhere on the site rather than
   inventing a new curve just for this chip. */
@media (prefers-reduced-motion: no-preference) {
  .lp-count-chip {
    animation: lp-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

@keyframes lp-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── Filter bar - search icon + autocomplete field, colored filter CTA ──
   `align-items: flex-end` (bottom-aligning each field's control against its
   own label) only makes sense in the row layout - base.css restacks
   .hl-filter-bar into a column with `align-items: stretch` at 480px so
   every field spans full width, and since this stylesheet loads AFTER
   base.css, an unconditional rule here would win the cascade at EVERY
   width (including mobile) and override that stretch, shrinking each
   field to its own content width and right-aligning it instead of
   stacking full-bleed. Scoped to the same breakpoint base.css itself uses
   for the switch, so mobile keeps its stretch. */
@media (min-width: 481px) {
  .lp-filter-bar {
    align-items: flex-end;
  }
}

.lp-filter-bar-field--search {
  flex: 1 1 220px;
}

/* base.css switches .hl-filter-bar from a row to a column at this same
   480px breakpoint - `flex: 1 1 220px` above is a main-axis (width) value
   meant for the row layout; left as-is here it gets reinterpreted as a
   main-axis HEIGHT once the axis flips, stretching the search field to a
   220px-tall box with a large empty gap under the input. Reset to a plain
   block once stacked. */
@media (max-width: 480px) {
  .lp-filter-bar-field--search {
    flex: initial;
  }
}

.lp-search-input {
  position: relative;
  display: flex;
  align-items: center;
}

.lp-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.lp-search-input:focus-within .lp-search-icon {
  color: var(--primary);
  transform: scale(1.1);
}

.lp-search-input .hl-input {
  width: 100%;
  padding-left: 36px;
  padding-right: 32px;
}

/* ─── Search clear button - :placeholder-shown does the show/hide (an
   empty <input type="search"> still shows its placeholder, a non-empty one
   doesn't), no JS needed for visibility. static/js/players-filter.js only
   handles the click itself (empty the field, refocus, resubmit
   immediately - bypassing the live-search debounce, since a deliberate
   "clear" tap should feel instant, not wait out the same pause typing
   does). Sized as a real 28px tap target even though the icon itself is
   14px, per the same touch-target reasoning as .lp-page-btn's 36px
   minimum below. */
.lp-search-clear {
  display: none;
  position: absolute;
  right: 4px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lp-search-clear:hover {
  background: var(--bg-raised);
  color: var(--text);
}

.lp-search-input .hl-input:not(:placeholder-shown) ~ .lp-search-clear {
  display: flex;
}

/* The search `<input>`, the two `<select>`s, and the submit `<button>`
   render at slightly different intrinsic heights by default (browsers size
   a native `<select>`'s box a couple px taller than a text `<input>` even
   with identical padding/border, and .hl-btn's own padding lands taller
   still) - explicit height + border-box pins all four to the same row
   height instead of a jagged top edge across the bar. */
.lp-filter-bar .hl-input,
.lp-filter-bar .hl-select,
.lp-filter-bar .lp-filter-btn {
  height: 40px;
  box-sizing: border-box;
}

/* Filter submit stays the brand-colored primary button (not the plain
   .hl-btn-secondary every other filter bar on the site uses) so it reads
   as the clear call-to-action once there's a 3rd (team) dropdown next to
   it, with a small lift/glow on hover/focus for polish. */
.lp-filter-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.lp-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -12px rgba(var(--primary-rgb), 0.55);
}

.lp-filter-btn:active {
  transform: translateY(0);
}

/* ─── Filters disclosure - a native <details>/<summary>, no JS required
   for the open/close mechanic itself. Below 640px (same breakpoint as the
   sort <select> and the results table's card-stack, all three keyed off
   "is this a phone-sized viewport") it behaves as a real collapsible
   section; at 641px+ both the <summary> toggle and the <details> box
   itself disappear (`display: contents`) so Position/Team/the Filter
   button render as plain flex items of .lp-filter-bar again - the exact
   markup this replaced, still exactly the desktop layout it had before. */
@media (min-width: 641px) {
  .lp-filters-toggle,
  .lp-filters-panel {
    display: contents;
  }

  .lp-filters-summary {
    display: none;
  }
}

@media (max-width: 640px) {
  .lp-filters-toggle {
    margin-top: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    transition: border-color 0.15s ease;
  }

  .lp-filters-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .lp-filters-summary::-webkit-details-marker {
    display: none;
  }

  .lp-filters-caret {
    margin-left: auto;
    transform: rotate(180deg);
    transition: transform 0.15s ease;
  }

  .lp-filters-toggle[open] .lp-filters-caret {
    transform: rotate(0deg);
  }

  .lp-filters-toggle[open] {
    border-color: var(--border-strong);
  }

  .lp-filters-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 14px 14px;
  }

  .lp-filters-panel .hl-filter-bar-field,
  .lp-filters-panel .lp-filter-btn {
    width: 100%;
  }
}

.lp-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 10px;
  font-weight: 700;
}

/* Mobile-only sort control (templates/players/league_players.html) - the
   desktop equivalent is the sortable column-header links in <thead>,
   which base.css's .hl-table--stack visually hides below this same
   640px breakpoint, so phone visitors need this stand-in or lose the
   ability to sort entirely. */
@media (min-width: 641px) {
  .lp-sort-field {
    display: none;
  }
}

/* ─── Position quick-filter chips (templates/players/league_players.html's
   `position_chips`, mobile only) - the desktop Position <select> in the
   filter bar already does this job in one control, so this is hidden at
   the same 641px breakpoint the mobile sort <select> above uses. Its own
   row (not folded into the .lp-filters-toggle disclosure) since the whole
   point is a single tap with nothing to open first. Horizontally
   scrollable rather than wrapping - a league with a long tail of unusual
   position values (see the view's `position_choices` docstring: free
   text, not a fixed list) still fits on one line instead of pushing the
   results down a variable amount. */
@media (min-width: 641px) {
  .lp-position-chips {
    display: none;
  }
}

@media (max-width: 640px) {
  .lp-position-chips {
    display: flex;
    gap: 6px;
    margin: var(--space-3) 0 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lp-position-chips::-webkit-scrollbar {
    display: none;
  }
}

.lp-position-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.lp-position-chip:active {
  transform: scale(0.95);
}

.lp-position-chip--active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

/* ─── Active-filter chips - one per active search/position/team value,
   each a real link dropping just that one param (apps/players/views.py's
   `_remove_filter_query`) so backing out of a single filter doesn't
   require reopening its dropdown and resetting it to "All ..." - the
   existing "Clear filters" link above stays for the all-at-once case. */
.lp-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.lp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.lp-filter-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.lp-filter-chip .icon {
  opacity: 0.6;
}

.lp-results-caption {
  margin: 0 0 var(--space-3);
}

/* ─── Page entrance - a light cascade (head -> filter bar -> table ->
   pagination) on every load, each section fading up slightly after the
   one before it. Kept off `.lp-row` itself (see below) since that
   element ALSO carries a :hover transform - an entrance animation with
   `animation-fill-mode: forwards` would hold its own last-keyframe
   transform value over the plain :hover rule (animations outrank regular
   declarations on the same property), silently breaking the hover
   effect. Everything here animates opacity/translateY only on elements
   that have no competing transform of their own.

   Deliberately NOT switched to the shared [data-lh-reveal]/
   IntersectionObserver convention (league_home.css/static/js/
   league-home.js, reused by Team Detail/Awards/Seasons/Game Detail) when
   the rest of the public pages were converted to it - two real
   advantages this page's own system has that the shared one doesn't:
   (1) it's pure CSS gated by `@media (prefers-reduced-motion:
   no-preference)`, so it still animates correctly even if JS fails to
   load entirely, not just under reduced motion (the shared system's
   base state is opacity:0 until JS adds .lh-is-visible - a real
   no-JS-failure blind spot this page doesn't have); (2) `.lp-row`'s
   stagger uses each row's own inline `--i` (set from the loop counter),
   so it scales to however many rows a page of results actually has,
   where the shared system's nth-child list stops staggering past the
   6th item. Normalizing this away would be a strict downgrade for a
   paginated table that regularly has more than 6 rows - kept as its own
   system on purpose, not an oversight. ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .lp-head {
    animation: lp-fade-in 0.3s ease both;
  }

  .lp-filter-bar {
    animation: lp-fade-in 0.3s ease 0.05s both;
  }

  .lp-table-wrap {
    animation: lp-fade-in 0.3s ease 0.1s both;
  }

  .lp-pagination {
    animation: lp-fade-in 0.3s ease 0.2s both;
  }
}

@keyframes lp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Table wrap / rows - border transition on the wrap, a staggered
   per-row fade-in (via each row's own `--i` custom property, set inline
   from the loop counter) plus a hover lift and a left accent bar echoing
   game_detail.css's `.gd-table-leader` treatment - on `::after` rather
   than `::before` since base.css's `.hl-table--stack td::before` already
   owns that pseudo-element for the mobile stacked-card labels. Positioning
   context (`position: relative`) lives on the row itself, not
   td:first-child, both so the accent bar below and the stretched-link
   overlay further down share one containing block - on desktop's
   single-line row the two are the same height anyway, so this is a
   no-op there, but the mobile stacked-card layout (base.css's
   .hl-table--stack, same 640px breakpoint) needs the row-level box for
   both to span the full card. ──────────────────────────────────────── */
.lp-table-wrap {
  transition: border-color 0.15s ease;
}

.lp-row {
  position: relative;
  /* `position: relative` alone doesn't reliably make a <tr> (table-row
     box) the containing block for the absolutely-positioned stretched-link
     ::after below in Safari/WebKit (webkit.org bug 240961 - fixed in STP
     243, but still live on most shipping iPadOS/iOS Safari) - every row's
     overlay falls back to the nearest containing block that DOES work,
     which on this page is shared by every row, so they all end up
     covering the same rect and paint order (last row wins) decides which
     one intercepts the tap. `transform` and `clip-path` don't share that
     bug and are contained-block triggers in their own right, so pairing
     them with `position: relative` fixes Safari while staying a no-op
     everywhere `position: relative` already worked correctly. */
  transform: translate(0);
  clip-path: inset(0);
  transition: background-color 0.15s ease;
}

.lp-row:hover td:first-child::after,
.lp-row:focus-within td:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--primary);
}

/* ─── Whole row/card is a click/tap target, not just the player name -
   the "stretched link" technique: an invisible full-row overlay riding on
   the existing .hl-player-link's ::after, layered UNDER the two cells that
   carry their own real links/controls (team name, the commissioner-only
   award-assign form) via .lp-cell-interactive's higher z-index, so those
   keep behaving as their own separate targets while the rest of the
   row/card (position, height, empty space) now also navigates to the
   player profile. A real <a>, not a JS click handler, so ctrl/cmd-click,
   middle-click-to-new-tab, and keyboard activation all keep working for
   free. ─────────────────────────────────────────────────────────────── */
.lp-row {
  cursor: pointer;
}

.lp-row .hl-player-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lp-row .lp-cell-interactive {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-row {
    opacity: 0;
    animation: lp-row-fade-in 0.3s ease forwards;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
}

@keyframes lp-row-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Sortable column headers (Player/Position/Height) - plain-text <th>s
   turned into links (apps/players/views.py's `_resolve_sort`/
   `_sort_link_query` build each one's toggled querystring server-side, same
   "logic in the view, template stays presentational" pattern as
   `pagination_query` below). The chevron reuses base.css's single
   chevron-up icon for both directions - rotated via `[data-dir="desc"]`
   rather than needing a second chevron-down asset - dimmed until a column
   is the active sort so the row doesn't read as three equally-loud calls
   to action. ─────────────────────────────────────────────────────────── */
.lp-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}

.lp-sort-link:hover {
  color: var(--text);
}

.lp-sort-link:hover .lp-sort-icon {
  opacity: 0.7;
}

.lp-sort-icon {
  opacity: 0.25;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lp-sort-link--active {
  color: var(--text);
}

.lp-sort-link--active .lp-sort-icon {
  opacity: 1;
  color: var(--primary);
}

.lp-sort-link--active[data-dir="desc"] .lp-sort-icon {
  transform: rotate(180deg);
}

/* ─── Sticky header - desktop only; base.css's .hl-table--stack visually
   hides <thead> below 640px (mobile stacked-card layout), so there's
   nothing to stick there. .hl-table-wrap's own border-radius would
   otherwise clip square header corners into the wrap's rounded top corners
   while stuck mid-scroll - overflow stays clipped horizontally only
   (.hl-table-wrap's existing overflow-x: auto), so this doesn't need its
   own extra rule for that. */
@media (min-width: 641px) {
  .lp-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

/* Single-color monogram for the player directory specifically - unlike
   base.css's .hl-avatar-placeholder[data-accent] rotation (teal/violet/
   lime/gold/coral, used where a long list benefits from looking varied,
   e.g. teams/standings), a wall of players reads calmer and more
   professional in one consistent brand color. */
.lp-avatar-placeholder {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.32);
  transition: transform 0.2s ease;
}

.hl-player-link:hover .lp-avatar-placeholder {
  transform: scale(1.08) rotate(-3deg);
}

.lp-player-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lp-jersey {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.lp-height {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.lp-height-unit {
  font-size: 10px;
  color: var(--text-muted);
}

.lp-team-link {
  font-weight: 600;
}

/* ─── Pagination - Prev/Next stay the site's shared button style, pinned
   to opposite ends via base.css's own `.hl-pagination { justify-content:
   space-between }`; the numbered pills sit in the single flex item between
   them. Deliberately ONE row at every width (`flex-wrap: nowrap`, not
   restacked at a mobile breakpoint the way `.hl-filter-bar` is) - Prev and
   Next are equal width, so space-between centers the numbers group
   between them for free. A previous version forced `.lp-page-numbers`
   onto its own full-width line under 640px, which split Prev/Next onto
   a lone centered row of their own, floating above the numbers with no
   visual relationship between the two - the exact "not aligned" look this
   replaces. `overflow-x: auto` on the numbers group is the fallback for a
   league with enough pages that the window (see
   apps.players.views._page_number_window) can't fit next to both nav
   buttons on a narrow phone - it scrolls in place instead of wrapping or
   squeezing Prev/Next off the row. ─────────────────────────────────────── */
.lp-pagination {
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.lp-page-nav {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.lp-page-nav:not(.hl-pagination-disabled):active {
  transform: scale(0.95);
}

.lp-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.lp-page-numbers::-webkit-scrollbar {
  display: none;
}

.lp-page-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.lp-page-btn:not(.lp-page-btn--current):hover {
  background: var(--bg-card);
  color: var(--text);
  transform: translateY(-1px);
}

.lp-page-btn:not(.lp-page-btn--current):active {
  transform: translateY(0) scale(0.95);
}

.lp-page-btn--current {
  background: var(--primary);
  color: var(--on-primary);
}

.lp-page-ellipsis {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 2px;
}

/* One-shot landing pulse on the current page so it reads as "you are
   here" without looping forever and becoming a distraction on a page
   that's otherwise just sitting still being read. */
@media (prefers-reduced-motion: no-preference) {
  .lp-page-btn--current {
    animation: lp-page-pulse 1s ease-out 0.3s both;
  }
}

@keyframes lp-page-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); }
}

/* ─── Mobile pass ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-head {
    align-items: flex-start;
  }

  .lp-count-chip {
    align-self: flex-start;
  }

  /* base.css's .hl-table--stack turns each <tr> into a full-height card at
     this same breakpoint, so the desktop accent above (scoped to
     td:first-child) only lit up the Player cell's own height - a short bar
     clipped near the top of the card, not a clean edge alongside the whole
     tapped row. Cancel it and re-home the accent on the row itself, adding
     :active alongside :hover/:focus-within since touch has no real hover to
     trigger it - a tap should give instant press feedback, not rely solely
     on a hover state that can stick around after the finger lifts (iOS
     "sticky hover"). */
  .lp-row:hover td:first-child::after,
  .lp-row:focus-within td:first-child::after {
    content: none;
  }

  .lp-row {
    -webkit-tap-highlight-color: transparent;
  }

  .lp-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .lp-row:active::before,
  .lp-row:focus-within::before {
    opacity: 1;
  }

  .lp-row:active,
  .lp-row:focus-within {
    background: var(--bg-raised);
  }

  /* ─── Denser card body - base.css's generic .hl-table--stack lays every
     td out on its own full-width "Label: value" line (built for a 5-column
     schedule row where each value genuinely needs room to wrap), which on
     THIS table means 4 stacked lines per player and only a couple of rows
     visible per screen. Position/Height/Current team collapse onto one
     shared line instead - each is already visually self-explanatory
     without its label (a colored position badge, a monospace height figure,
     a real link) - so a phone screen shows roughly twice as many players
     per scroll. Player and Assign award (governed by can_assign_awards,
     mobile Commissioner/Admin use) keep their own full-width line, the
     latter because a <select> + button genuinely needs the room. Selectors
     scoped to `.lp-table` specifically (two classes/an attribute, vs base's
     single-class `.hl-table--stack`) so this doesn't affect the schedule
     page's own stacked table. */
  .lp-table.hl-table--stack tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
  }

  .lp-table.hl-table--stack td {
    padding: 0;
    width: auto;
  }

  .lp-table td[data-label="Player"] {
    flex: 1 1 100%;
  }

  .lp-table td[data-label="Player"]::before,
  .lp-table td[data-label="Position"]::before,
  .lp-table td[data-label="Height"]::before,
  .lp-table td[data-label="Current team"]::before {
    content: none;
  }

  .lp-table td[data-label="Position"],
  .lp-table td[data-label="Height"],
  .lp-table td[data-label="Current team"] {
    font-size: 12px;
  }

  .lp-table td[data-label="Assign award"] {
    flex: 1 1 100%;
  }
}

@media (max-width: 400px) {
  .lp-page-nav-label {
    display: none;
  }
}