/* List-screen controls: pills, head select, table links, search/select/sort menu, action buttons, focus ring. */
/* THE "this is you" pill, unscoped: both ladders mark the viewer's own row and had grown two
   copies of one badge. Carries no margin — .lb-who is a flex row with a gap, .tl-who a plain
   cell, so the space around it belongs to the screen. */
.nl-you-pill,
.nl-admin-pill {
  display: inline-flex; align-items: center; vertical-align: middle;
  padding: 1px 8px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lapis-2);
  background: color-mix(in srgb, var(--lapis-2) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--lapis-2) 40%, transparent);
}
/* Staff wear amethyst everywhere — one purple is the signal, whatever the account's own colour. */
.nl-admin-pill {
  color: var(--amethyst-2);
  background: color-mix(in srgb, var(--amethyst) 16%, transparent);
  border-color: color-mix(in srgb, var(--amethyst) 40%, transparent);
}

/* THE row spine: a 3px inset bar marking YOUR row. The solved-puzzle variant is the same idiom
   in laurel and stays with its table (training.css). */
.tl-table tbody tr.me td:first-child,
.lb-table tbody tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--lapis-2); }

.nl-admin-only { font-size: 0.58rem; color: var(--amethyst-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* THE panel-head filter select (DataCard.filterSelect), unscoped like the rest of .nl-*.
   .nl-sel defaults to width:100% outside a toolbar — pin it to content here. */
.nl-headsel { display: flex; align-items: center; flex: 0 0 auto; }
.nl-headsel .nl-headsel-el { width: auto; min-width: 140px; }
/* Their own line, full width — side by side in a narrow head they squeeze to the caret. The
   tools ROW has to wrap for that to mean anything, so both halves live here; the row selector
   is a LIST a screen joins, never a copy it makes in its own sheet. */
@media (max-width: 640px) {
  .tr-lib-card .bf-open-tools { flex: 1 1 100%; margin-left: 0; }
  .nl-headsel { flex: 1 1 auto; }
  .nl-headsel .nl-headsel-el { width: 100%; min-width: 0; }
}

/* THE table-cell link, unscoped: news, newsletter, feedback and reports tables, and
   DataCard.nameLink — which ships to every screen, so this cannot live in an admin sheet. */
.na-title-link {
  padding: 0; background: none; border: 0; font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
/* THE clamped table title — a selector list. A long subject wrapped to four lines and pushed
   every other column off a phone; one line with an ellipsis instead, the full text one tap
   away in the row's own view. The px cap rides the LINK, never the cell: `max-width` on a
   <td> is only a hint under `table-layout: auto` and the browser may hand it more. */
.fb-title-cell > .na-title-link,
.tr-col-title > .na-title-link,
.na-col-title > .na-title-link {
  display: block; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
  /* Narrower cap, but a floor on the cell so the title still gets the room it needs. */
  .fb-title-cell,
  .tr-col-title,
  .na-col-title { min-width: 150px; }
  .fb-title-cell > .na-title-link,
  .tr-col-title > .na-title-link,
  .na-col-title > .na-title-link { max-width: 190px; }
}
.na-title-link:hover { color: var(--bronze-2); text-decoration: underline; }
/* Bare <button> (no .btn), so buttons.css's ring doesn't reach it. */
.na-title-link:focus-visible {
  outline: 2px solid var(--bronze-2); outline-offset: 2px; border-radius: var(--radius-s);
}

/* Auto layout: with no <col> widths, fixed + min-width:max-content hits Chromium's 1,000,000px constant and creates a phantom horizontal scroll. */
.news-admin-screen .news-admin-table,
.reports-admin-screen .ra-table { table-layout: auto; font-size: 0.86rem; }
.news-admin-screen .news-admin-table tbody td,
.reports-admin-screen .ra-table tbody td {
  color: var(--ink-2); border-bottom-color: var(--divider); vertical-align: middle;
}
.news-admin-screen .news-admin-table tbody tr:hover,
.reports-admin-screen .ra-table tbody tr:hover,
.bf-table tbody tr:hover td,
.dash-map-table tbody tr:hover td {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Shared unscoped rail/toolbar controls; compact 32px height. */
.nl-search,
.nl-sel {
  height: 32px; padding: 0 10px; width: 100%;
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
}
.nl-search {
  min-width: 0;
  background-image: var(--search-icon);
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 13px 13px;
  padding-left: 30px;
}
/* THE sort control (DataCard.sortSelect). Desktop: the labelled dropdown. Phones: a ⇅ icon
   button sized exactly like Refresh/Compact, with the SELECT laid over it at opacity 0 — the
   tap opens the native picker, the accessible name stays on the real control, and the select's
   own skin (two of the three spend background-image on a custom caret) is simply invisible.
   ⇅ U+21C5 is not an emoji codepoint, so it stays text-presentation. */
/* THE sort control: a ⇅ button matching Refresh and Compact, and a real menu below it. A
   native <select> was the obvious build and had to go — its popup's width, row spacing, header
   gap and anchor edge are all OS-drawn, so none of this was reachable. */
.nl-sortmenu { display: inline-flex; align-items: center; flex: none; }
.nl-sortmenu-pop {
  /* FIXED, placed by DataCard._sortMenuPlace: .bf-open and friends carry `overflow: hidden`,
     which would clip an absolutely-positioned popup at the panel's edge. */
  position: fixed; z-index: 60;
  /* A floor, not a target: the content sizes it (125px for short labels, 152px for the longest
     option set in the app), so the popup is only as wide as its rows need. */
  min-width: 132px; max-width: min(300px, calc(100vw - 16px));
  max-height: min(60vh, calc(100vh - 24px)); overflow-y: auto; overflow-x: hidden;
  padding: 6px;
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}
.nl-sortmenu-pop[hidden] { display: none; }
/* The header's own padding is what keeps the first row clear of the button above it. */
.nl-sortmenu-head {
  padding: 5px 10px 7px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.nl-sortmenu-opt {
  all: unset; box-sizing: border-box; display: block; width: 100%;
  /* Indented past the header's 10px, so the options read as sitting UNDER "Sort by". */
  padding: 7px 10px 7px 24px; border-radius: var(--radius-s);
  font-size: 0.85rem; color: var(--ink-2); cursor: pointer;
  /* Clipped, not scrolled: overflow-y:auto promotes overflow-x, and a longer locale's label
     would have grown a horizontal scrollbar under the rows. The full text is in the name. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nl-sortmenu-opt:hover { background: var(--bg-3); color: var(--ink); }
.nl-sortmenu-opt:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: -2px; }
.nl-sortmenu-opt.is-on { color: var(--bronze-2); }
.nl-main-actions .nl-sel { width: auto; }
.nl-main-actions .btn { height: 32px; padding: 0 12px; font-size: 0.85rem; }
.nl-main-actions .btn.is-on { border-color: var(--bronze); color: var(--bronze-2); }
/* Collapsible action buttons: text on desktop, icon on phones. UNSCOPED so it works on any button (via DataCard.actionBtn). */
/* THE rail width, in rem so it scales with the user's font size. Every list screen shares it;
   collapsed drops to content width. */
.nl-filters-rail { grid-area: filters; width: 15.625rem; transition: width 0.18s ease; }
.nl-filters-rail.nl-rail-collapsed { width: auto; }
/* Below the stacking breakpoint the rail owns a full-width row, so the fixed width and its
   transition would only leave dead space beside it. Placed here, not in the 1024 block above:
   a media query adds no specificity and those two rules come later.
   .bf-grid is excluded: it stacks at 768, not 1024, and every rail carries .nl-filters-rail —
   100% in its still-`auto` track resolves to max-content instead. */
@media (max-width: 1024px) {
  .nl-filters-rail,
  .nl-filters-rail.nl-rail-collapsed { width: 100%; transition: none; }
  .bf-grid > .nl-filters-rail { width: 15.625rem; }
  .bf-grid > .nl-filters-rail.nl-rail-collapsed { width: auto; }
}

/* An icon-only button keeps the label's horizontal padding otherwise, which makes a ~54px
   button for a 16px glyph. */
.btn.nl-act-compact,
.btn.nl-act-refresh,
.btn.nl-act-back,
.btn.nl-act-icon { padding-left: 10px; padding-right: 10px; }
/* The head's filters toggle sits in panelHead's OTHER slot, outside .nl-main-actions, so it
   states the tools' box itself or it renders 2px shorter than the buttons beside it. */
.btn.nl-head-filters,
/* Back lives outside .nl-main-actions (its own row on a detail screen), so it states the box
   itself or it renders 2px shorter than every other icon button. */
.btn.nl-act-back,
/* The sort button sits in the panel head too. */
.btn.nl-sort-btn { height: 32px; padding: 0 10px; font-size: 0.85rem; }

.nl-act-ico { display: none; }
/* The glyph may be an inline SVG (UI_ICONS); size it like the text it replaces. */
.nl-act-ico svg { width: 1em; height: 1em; }
@media (max-width: 640px) {
  /* Centre + size the glyph, or emoji-presentation icons balloon the button. */
  .nl-act-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1em; font-size: 1rem; line-height: 1; font-family: var(--font-sans);
  }
  .nl-act-lbl { display: none; }
}
/* The Compact toggle (DataCard.compactBtn) and the panel-head filters toggle
   (FilterRail.headToggle) keep the phone form at EVERY width — one appearance per control
   across every table that carries it. (0,2,0) so it out-ranks the base rules above in both
   directions; title + aria-label carry the word. */
.nl-act-compact .nl-act-lbl,
.nl-act-refresh .nl-act-lbl,
.nl-act-back .nl-act-lbl,
.nl-act-icon .nl-act-lbl { display: none; }
.nl-act-compact .nl-act-ico,
.nl-act-refresh .nl-act-ico,
.nl-act-back .nl-act-ico,
.nl-act-icon .nl-act-ico,
.nl-head-filters .nl-act-ico,
.nl-sort-btn .nl-act-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; font-size: 1rem; line-height: 1; font-family: var(--font-sans);
}
/* The on-state cue rides the BUTTON, not the toolbar: `.nl-main-actions .btn.is-on` misses the HQ
   and profile toolbars, and with no label left the bronze edge is the only sighted cue that
   compact is active. */
.nl-act-compact.is-on { border-color: var(--bronze); color: var(--bronze-2); }
/* THE input focus ring — one idiom (bronze @30%); a field joins this list, never re-rolls
   the halo. */
/* THE compact search: collapsed to its own magnifier, opening on focus. It stays open while it
   holds a query — a field that snapped shut on blur would hide the very text filtering the list.
   For a search in a TOOLBAR; the ones inside a filter rail have a labelled section and want the
   full width. */
.nl-search-mini {
  /* The field is ALWAYS 260px wide and max-width clips it shut: `width` alone collapses to
     padding + border here, because .nl-search carries min-width:0. It opens INSTANTLY — a
     transition on any of width / flex-basis / max-width leaves the item pinned at its closed
     size in this flex row, however long you wait. Measure before adding one back. */
  flex: 0 0 auto; width: 260px; max-width: 34px;
  padding-right: 0; cursor: pointer;
}
.nl-search-mini:focus,
.nl-search-mini:not(:placeholder-shown) {
  max-width: 260px; padding-right: 10px; cursor: text;
}

.nl-search:focus,
.nl-sel:focus,
.news-admin-screen .na-field input:focus,
.news-admin-screen .na-field select:focus,
.news-admin-screen .na-form textarea:focus,
.am-admin-input:focus,
.ranks-admin-row input:focus,
.cl-ann-field:focus,
.dm-input:focus,
.bf-search input:focus,
.bf-filter-select:focus,
.bf-create-pw:focus,
.create-input:focus,
.fb-search:focus,
.feedback-title-input:focus,
.feedback-textarea:focus,
.profile-input:focus,
.modal-input:focus,
.chat-input input:focus,
.ag-input:focus,
.ag-select:focus,
.cl-menu-search:focus,
.sub-input:focus,
.dm-inv-search:focus,
.tn-field input:focus,
.tn-field select:focus {
  outline: none; border-color: var(--bronze); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bronze) 30%, transparent);
}