/* List-screen grid, toolbars, the framed table card and the shared cell/link selector lists. */
/* List-screen layout — ONE definition, expressed as a selector list (shared-component idiom, cf. page-tab in layout.css). Create buttons live in the framed panel head (DataCard.createBtn). */
.lb-layout,
.lv-layout,
.fb-layout,
.tu-led-layout,
.tl-layout,
.tn-layout,
.sub-layout,
.companions-screen .cp-layout,
.reports-admin-screen .nl-layout,
.news-admin-screen .nl-layout {
  display: grid;
  /* `auto` sizes the rail column to the rail itself, so collapsing hands the width to the table.
     The rail carries .nl-rail-collapsed from railClass() at render, so this is right on first
     paint — no JS, and no :has() (above the support floor). */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: ". toolbar" "filters main";
  gap: 12px 20px;
  align-items: start;
  width: 100%;
}

/* The create buttons live in the framed panel head (DataCard.createBtn), so these three
   share the base areas; only the tighter gap survives from the old "+ New" variant. */
.tn-layout,
.companions-screen .cp-layout,
.news-admin-screen .nl-layout {
  gap: 10px 20px;
}

/* Cell placements and the toolbar shape belong WITH the grid — news scoped them to itself
   and companions had to re-declare them, which is how a shared component grows copies. Each
   is a selector LIST: a screen's own cell class joins here, it is not copied. */
.nl-main-toolbar,
.tn-main-toolbar {
  grid-area: toolbar;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
/* Tournaments' toolbar is not the grid item (.tn-toolbar-wrap is), so grid-area is inert on it. */
.tn-main-toolbar { gap: 10px 16px; }
/* margin-left:auto, not the parent's space-between: several toolbars lost their count and
   now hold only this group, which space-between would pull to the left edge. */
.nl-main-actions,
.dash-head-actions,
.cl-disc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
/* Discover has no rail, so its filters sit across the top of the panel and end-align. */
.cl-disc-tools { justify-content: flex-end; }
.nl-main,
.fb-main,
.lb-main,
.sub-main,
.tn-main,
.tu-led-main,
.tl-main,
.companions-screen .cp-main { grid-area: main; min-width: 0; }

/* Compact mode drops the optional columns — the table only has to mark them. Shared: every
   list screen's table carries .data-table and marks its optional columns .nl-col-opt. */
.data-table.is-compact .nl-col-opt { display: none; }

/* Stacked at 1024px: filters, then toolbar, then list. */
@media (max-width: 1024px) {
  .lb-layout,
  .lv-layout,
  .fb-layout,
  .tu-led-layout,
  .tl-layout,
  .tn-layout,
  .sub-layout,
  .companions-screen .cp-layout,
  .reports-admin-screen .nl-layout,
  .news-admin-screen .nl-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "filters" "toolbar" "main";
  }

}

/* Shared list-screen chrome (the .nl-* components). .nl-* are UNSCOPED ON PURPOSE — five NON-ADMIN screens depend on it (leaderboard, training, tournaments, topup ledger, feedback), one reachable logged out; tiering them to admins collapses those screens to one column with no error. Must load before the screen sheets. "nl-" is ancestry, not scope. */
/* This rail collapses via its master caret, so keep it visible at ≤768px (battlefield.css hides its own .bf-filters-rail there instead). */
@media (max-width: 768px) {
  .nl-filters-rail:not(.is-mob-open) { display: flex; }
  .nl-filters-rail .bf-filters-body { display: flex; flex-direction: column; gap: 16px; }
}

/* THE framed table card (overflow clips the table's rounded corners) — a selector list. The
   shadow alone lifts the card; a border around it as well read as a box drawn twice. */
.bf-open,
.fb-table-card,
.cl-disc-main {
  background: transparent;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
/* Discover's panel sits under a card GRID rather than clipping a table, so it keeps its own
   ground and the flow that spaces the rows inside it. */
.cl-disc-main {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px;
  overflow: visible;
  background: var(--bg-0);
}
/* Phones: even the shadow is chrome a narrow viewport cannot afford — edge to edge instead. */
@media (max-width: 640px) {
  .bf-open,
  .fb-table-card,
  .cl-disc-main { border-radius: 0; box-shadow: none; }
}

/* THE avatar+name table cell — a selector list. */
.cl-win-who,
.cp-who,
.lb-who,
.tn-namecell,
.bkt-search-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* THE inline text-link button — a selector list. */
.am-linklike,
.donate-inline-link,
.sub-inline-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--bronze-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.am-linklike:hover,
.donate-inline-link:hover { color: var(--gold); }