/* ==========================================================================
   Dashboard v2 — built on Skynet UI (https://skynetui.com)

   Only page-specific layout lives here; components come from skynet-ui.css.
   Every color is a Skynet UI token so the page follows the brand theme.
   The Tailwind classes the shared tab scripts still inject are covered by
   the generated dashboard-v2-compat.css (npm run build:dashboard-v2-compat).
   ========================================================================== */

/* Palettes live in public/css/themes-v2.css — one copy for all six
   themes, loaded before this file. What stays here is this page's own
   layout, which is not a colour and does not change with the theme — so it
   hangs off :root, not off one theme's selector. Leaving it on
   [data-theme="skynet"] would drop the sidebar width the moment somebody
   picked another palette. */
:root {
  --sk-sidebar-width: 264px;
  /* Leaflet.draw's icons are dark artwork for a white control; a dark page
     needs them inverted and a light one must leave them alone. Not a colour
     token, so it lives here rather than in themes-v2.css. */
  --dv2-leaflet-icons: invert(0.88) hue-rotate(180deg);
  /* The site header (partials/header.ejs) is fixed at 60px. */
  --dv2-header: 60px;
}
body.has-partnership-widget { --dv2-header: 104px; }
@media (max-width: 640px) {
  body.has-partnership-widget { --dv2-header: 100px; }
}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */
html, body { min-height: 100%; }
body.dv2 { background: var(--sk-bg); color: var(--sk-text); }

/* The header partial renders its own .nav-spacer; the layout starts below it. */
.dv2-layout { min-height: calc(100vh - var(--dv2-header)); min-height: calc(100svh - var(--dv2-header)); }

/* Nothing decorative may widen the page.
   Skynet's tooltips are `white-space: nowrap` ::after boxes anchored to the
   element's centre, so one on a button near the right edge sticks out past the
   viewport and the whole document scrolls sideways — the top bar's three
   tooltips did exactly that, on every tab, at every width. `clip` contains
   them without becoming a scroll container, so the sticky top bar and sticky
   sidebar keep working and fixed children (drawer, FABs, sheets) still escape
   to the viewport as they must. */
#dash-v2 { overflow-x: clip; }
@supports not (overflow-x: clip) { #dash-v2 { overflow-x: hidden; } }

/* Clipping stops the page from growing, but a tooltip that runs off the edge
   is also unreadable. Let them wrap and cap their width on narrow screens. */
@media (max-width: 767px) {
  [data-sk-tip]::after { white-space: normal; width: max-content; max-width: min(70vw, 15rem); text-align: center; }
}

/* Skynet UI declares `.hidden` before its own component display rules, so a
   hidden .sk-btn or .sk-alert would still render. This page needs `hidden` to
   win — the tab scripts toggle it hundreds of times — but NOT with
   `!important`: several scripts reveal an element by assigning
   `el.style.display`, and an important declaration would beat that inline
   style and pin the element shut forever. Two classes (0,2,0) already outrank
   every Skynet component rule that sets display, and the block sits at the end
   of this file so it also wins ties. See docs/DASHBOARD_V2.md.
   Rule lives in the "last word" section at the bottom of this file. */

/* Tab panels — same contract the classic dashboard and tab-loader.js use:
   #<tab>-tab.tab-content gets .active when shown. */
.tab-content { display: none; }
.tab-content.active { display: block; animation: dv2-tab-in 0.25s ease-out; }
@keyframes dv2-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* Floating map controls belong to their own tab only */
.tab-content:not(.active) #heatmap-fab,
.tab-content:not(.active) #heatmap-mobile-sheet,
.tab-content:not(.active) #heatmap-backdrop,
.tab-content:not(.active) #map-fab,
.tab-content:not(.active) #map-mobile-sheet,
.tab-content:not(.active) #map-backdrop { display: none !important; }

/* Preflight-lite for HTML the shared tab scripts inject at runtime. That
   markup was written against Tailwind's reset (no default margins on
   headings/paragraphs, unstyled buttons). :where() keeps specificity at 0
   so every Skynet component rule still wins. */
:where(#dash-v2 h1, #dash-v2 h2, #dash-v2 h3, #dash-v2 h4, #dash-v2 h5, #dash-v2 h6, #dash-v2 p,
       #dash-v2 figure, #dash-v2 blockquote, #dash-v2 pre, #dash-v2 dl, #dash-v2 dd, #dash-v2 hr) { margin: 0; }
:where(#dash-v2 ul, #dash-v2 ol) { list-style: none; margin: 0; padding: 0; }
:where(#dash-v2 hr) { border: 0; border-top: 1px solid var(--sk-border); }
:where(#dash-v2 button, #dash-v2 [role="button"]) { cursor: pointer; }
:where(#dash-v2 button) { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; }
:where(#dash-v2 button:disabled) { cursor: not-allowed; opacity: 0.6; }
:where(#dash-v2 input, #dash-v2 select, #dash-v2 textarea) { font: inherit; color: inherit; background-color: transparent; border: 0; }
:where(#dash-v2 img, #dash-v2 svg, #dash-v2 video, #dash-v2 canvas) { display: block; max-width: 100%; }
:where(#dash-v2 svg) { height: auto; }
:where(#dash-v2 svg.w-4, #dash-v2 svg.w-5, #dash-v2 svg.w-6, #dash-v2 svg.w-8, #dash-v2 svg.w-10, #dash-v2 svg.w-12, #dash-v2 svg.w-16) { height: 100%; }
:where(#dash-v2 svg.h-4) { height: 1rem; }
:where(#dash-v2 svg.h-5) { height: 1.25rem; }
:where(#dash-v2 svg.h-6) { height: 1.5rem; }
:where(#dash-v2 svg.h-8) { height: 2rem; }
:where(#dash-v2 svg.h-10) { height: 2.5rem; }
:where(#dash-v2 svg.h-12) { height: 3rem; }
:where(#dash-v2 svg.h-16) { height: 4rem; }
:where(#dash-v2 [data-sk-icon]) { display: inline-flex; }
:where(#dash-v2 table) { border-collapse: collapse; }
:where(#dash-v2 a) { color: var(--sk-primary-text); }
:where(#dash-v2 code, #dash-v2 kbd, #dash-v2 pre) { font-family: var(--sk-font-mono); }
/* Inputs injected with Tailwind classes get the Skynet input look */
:where(#dash-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not(.sk-input):not(.form-control),
       #dash-v2 select:not(.sk-select):not(.form-control),
       #dash-v2 textarea:not(.sk-textarea):not(.form-control)) {
  border: 1px solid var(--sk-border-2);
  border-radius: var(--sk-radius-sm);
  background-color: var(--sk-bg);
  color: var(--sk-text);
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
  font-size: 16px; /* stops iOS zoom-on-focus */
}
:where(#dash-v2 select:not(.sk-select):not(.form-control)) { padding-right: 2rem; }
:where(#dash-v2 input, #dash-v2 select, #dash-v2 textarea):focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 1px; }
:where(#dash-v2 input[type="checkbox"], #dash-v2 input[type="radio"]) { accent-color: var(--sk-primary); width: 1rem; height: 1rem; }
:where(#dash-v2 input[type="checkbox"].sr-only) { width: 1px; height: 1px; }
:where(#dash-v2 input[type="range"]) { accent-color: var(--sk-primary); width: 100%; }
:where(#dash-v2 input[type="color"]) { min-height: 2.5rem; border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border-2); padding: 2px; }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.dv2-sidebar {
  gap: 0.15rem;
  padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .dv2-sidebar {
    position: sticky;
    top: var(--dv2-header);
    height: calc(100vh - var(--dv2-header));
    height: calc(100dvh - var(--dv2-header));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
@media (max-width: 767px) {
  /* Keep the site header reachable while the drawer is open */
  .dv2-sidebar { top: var(--dv2-header); z-index: 9000; width: min(84vw, 320px); }
  .sk-backdrop { z-index: 8990; }
}
/* Skynet UI paints .sk-sidebar-title in --sk-faint. These are the sidebar's
   group headings — structure, not de-emphasised prose — and faint is a
   large-text-band colour in both modes, so at 12px they miss 4.5:1 (3.56:1 on
   a dark surface, 3.94:1 on a light --sk-bg). --sk-muted is the label colour
   and clears the floor on every background in both modes. Same call as
   .apv2-nav-group; the library class is the only reason it needs an override
   here rather than at the definition. */
.dv2-sidebar .sk-sidebar-title { padding-top: 0.9rem; color: var(--sk-muted); }
.dv2-sidebar .sk-sidebar-title:first-child { padding-top: 0.25rem; }
.dv2-sidebar a.tab-button {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.dv2-sidebar a.tab-button:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: -2px; }
.dv2-sidebar a.tab-button.active { color: var(--sk-primary-text); background: var(--sk-primary-soft); border-color: color-mix(in srgb, var(--sk-primary) 35%, transparent); }
.dv2-sidebar a.tab-button[disabled], .dv2-sidebar a.tab-button.hidden { display: none; }
.dv2-sidebar .dv2-nav-icon {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--sk-surface-2);
  color: var(--sk-muted);
  font-size: 0.85rem;
  flex: none;
  transition: background var(--sk-transition), color var(--sk-transition);
}
.dv2-sidebar a.tab-button.active .dv2-nav-icon,
.dv2-sidebar a.tab-button:hover .dv2-nav-icon { background: color-mix(in srgb, var(--sk-primary) 28%, transparent); color: var(--sk-primary-text); }
.dv2-sidebar .dv2-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv2-sidebar .maintenance-indicator { margin-left: auto; font-size: 0.75rem; }
.dv2-side-foot {
  margin-top: auto;
  padding: 0.85rem 0.35rem 0;
  border-top: 1px solid var(--sk-border);
  font-size: 0.75rem;
  color: var(--sk-muted);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dv2-side-foot kbd { font-size: 0.7rem; }

/* --------------------------------------------------------------------------
   Main column + top bar
   -------------------------------------------------------------------------- */
.dv2-main { padding: 1rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .dv2-main { padding: 1.25rem 1.5rem 2.5rem; } }
@media (min-width: 1280px) { .dv2-main { padding: 1.5rem 2rem 3rem; } }
.dv2-content { max-width: 1400px; margin: 0 auto; }

.dv2-topbar {
  position: sticky;
  top: var(--dv2-header);
  z-index: 40;
  margin: -1rem -1rem 1rem;
  padding: 0.6rem 1rem;
  background: color-mix(in srgb, var(--sk-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sk-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
@media (min-width: 640px) { .dv2-topbar { margin: -1.25rem -1.5rem 1.25rem; padding: 0.7rem 1.5rem; } }
@media (min-width: 1280px) { .dv2-topbar { margin: -1.5rem -2rem 1.5rem; padding: 0.75rem 2rem; } }
.dv2-topbar .dv2-server {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 14rem;
  min-width: 0;
}
.dv2-topbar .dv2-server .sk-label { margin: 0; white-space: nowrap; }
.dv2-topbar .dv2-server .sk-select { min-width: 0; flex: 1; min-height: 44px; }
.dv2-topbar .dv2-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.dv2-topbar .sk-btn { min-height: 40px; }
#linked-player-indicator:empty { display: none; }
#linked-player-indicator { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
@media (max-width: 639px) {
  .dv2-topbar .dv2-actions { width: 100%; justify-content: space-between; }
  .dv2-topbar .dv2-menu-btn { order: -1; }
}

.dv2-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.dv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-primary-text);
}
.dv2-title {
  margin: 0;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.dv2-subtitle { margin: 0.25rem 0 0; color: var(--sk-muted); font-size: 0.9rem; }
.dv2-no-server {
  margin-bottom: 1.25rem;
}
/* Server names are long and .sk-badge never wraps, so the chip has to be
   allowed to end in an ellipsis rather than run under the screen edge. */
#dv2-server-chip { max-width: 100%; min-width: 0; }
#dv2-server-chip #dv2-server-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#dv2-page-tools { min-width: 0; max-width: 100%; }

/* --------------------------------------------------------------------------
   Content building blocks used by the converted tab partials
   -------------------------------------------------------------------------- */
/* Vertical rhythm inside a tab */
.dv2-stack > * + * { margin-top: 1.25rem; }

/* Card header icon chip */
.dv2-card-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sk-primary-soft);
  color: var(--sk-primary-text);
  flex: none;
  font-size: 1rem;
}
.dv2-card-icon.is-success { background: var(--sk-success-soft); color: var(--sk-success-text); }
.dv2-card-icon.is-warning { background: var(--sk-warning-soft); color: var(--sk-warning-text); }
.dv2-card-icon.is-danger { background: var(--sk-danger-soft); color: var(--sk-danger-text); }
.dv2-card-icon.is-info { background: var(--sk-info-soft); color: var(--sk-info-text); }
.sk-card-header .dv2-card-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.sk-card-header .dv2-card-head h2, .sk-card-header .dv2-card-head h3 { margin: 0; font-size: 1.05rem; }
.sk-card-header .dv2-card-head p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--sk-muted); font-weight: 400; }
.sk-card-header .dv2-card-tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

/* Setting row: label + control on one line, stacks on phones */
.dv2-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--sk-radius-sm);
  border: 1px solid transparent;
  transition: background var(--sk-transition), border-color var(--sk-transition);
}
.dv2-setting:hover { background: var(--sk-surface-2); border-color: var(--sk-border); }
label.dv2-setting { cursor: pointer; }
.dv2-setting .sk-toggle { gap: 0; }
.dv2-setting .dv2-setting-text { min-width: 0; }
.dv2-setting .dv2-setting-text strong { display: block; font-weight: 600; font-size: 0.925rem; color: var(--sk-text); }
.dv2-setting .dv2-setting-text span { display: block; font-size: 0.8rem; color: var(--sk-muted); }
.dv2-setting .sk-toggle { flex: none; }
.dv2-setting .sk-toggle span { margin: 0; }
/* Toggle switch with the label on the left (old "flex justify-between" rows) */
.sk-toggle.dv2-toggle-end { display: flex; justify-content: space-between; width: 100%; }

/* Stat tile (KPI) */
.dv2-stat {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
}
.dv2-stat .dv2-card-icon { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
/* A KPI row can be two tiles wide or six; the tile adapts to its own box
   rather than the viewport, so a six-across row stacks the icon above the
   label instead of squeezing "Total players" into "TOTAL PLAYER / S". */
#dash-v2 .sk-card:has(> .dv2-stat) { container-type: inline-size; }
@container (max-width: 210px) {
  .dv2-stat { flex-direction: column; align-items: flex-start; gap: 0.55rem; padding: 0.85rem 0.9rem; }
  .dv2-stat .dv2-card-icon { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .dv2-stat .sk-stat-value { font-size: 1.35rem; }
}
.dv2-stat .sk-stat-value { font-size: 1.55rem; margin-top: 0; }
.dv2-stat .sk-stat-label { font-size: 0.72rem; }
.dv2-stat-body { min-width: 0; }
/* The label wraps rather than truncating — a KPI called "TOTAL…" tells the
   reader nothing. Only the value, which is short by nature, is clipped. */
.dv2-stat-body .sk-stat-label { white-space: normal; overflow-wrap: break-word; word-break: normal; letter-spacing: 0.03em; line-height: 1.2; }
.dv2-stat-body .sk-stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toolbar row (filters, search, actions) */
.dv2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; }
.dv2-toolbar .sk-field { margin: 0; }
.dv2-toolbar .dv2-grow { flex: 1 1 12rem; min-width: 0; }
.dv2-toolbar .dv2-end { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dv2-control { display: flex; align-items: center; gap: 0.5rem; }
.dv2-control .sk-label { margin: 0; white-space: nowrap; }

/* Section inside a card body */
.dv2-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-muted);
}
.dv2-section-title::after { content: ""; flex: 1; height: 1px; background: var(--sk-border); }

/* Admins tab: one permission checkbox per dashboard tab, grouped the way the
   sidebar groups the tabs themselves. Without the grouping it is 25 checkboxes
   in one undifferentiated column. */
.dv2-perm-group + .dv2-perm-group { margin-top: 0.75rem; }
.dv2-perm-group-title {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--sk-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Key/value list */
.dv2-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; }
.dv2-kv dt { color: var(--sk-muted); }
.dv2-kv dd { margin: 0; color: var(--sk-text); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .dv2-kv { grid-template-columns: 1fr; gap: 0.15rem; } .dv2-kv dt { margin-top: 0.4rem; } }

/* Compact inline status */
.dv2-status { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--sk-muted); }
.dv2-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sk-faint); flex: none; }
.dv2-dot.is-online, .dv2-dot.is-success { background: var(--sk-success); box-shadow: 0 0 0 3px var(--sk-success-soft); }
.dv2-dot.is-warning { background: var(--sk-warning); box-shadow: 0 0 0 3px var(--sk-warning-soft); }
.dv2-dot.is-danger, .dv2-dot.is-offline { background: var(--sk-danger); box-shadow: 0 0 0 3px var(--sk-danger-soft); }
.pulse-green { animation: dv2-pulse-green 2s ease-out infinite; }
@keyframes dv2-pulse-green { 0% { box-shadow: 0 0 0 0 var(--sk-success-soft); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* The tab scripts inject flex and grid rows holding user-controlled strings:
   gamertags, 18-digit Discord ids, mission file paths. A flex or grid child
   defaults to min-width:auto, so a single long unbreakable word makes the row
   wider than its card and the panel scrolls sideways — the Admins list does
   this with a long gamertag. Let children shrink, and break such words rather
   than the layout. */
:where(#dash-v2) .flex > *,
:where(#dash-v2) .grid > *,
:where(#dash-v2) .sk-grid > * { min-width: 0; }
:where(#dash-v2) .tab-content { overflow-wrap: break-word; }

/* Scrollable list panels (search results, logs) */
.dv2-scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; }
.dv2-scroll-sm { max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; }
.dv2-scroll-lg { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
/* A short inner scroller inside a page that also scrolls is miserable on a
   phone: a few rows are visible and the rest is trapped behind a nested
   gesture. Give the long lists most of the screen instead, and measure it
   against the viewport rather than a fixed rem height. Search-result panels
   (.dv2-scroll-sm) stay small on purpose — they behave like a dropdown. */
@media (max-width: 767px) {
  .dv2-scroll { max-height: 65svh; }
  .dv2-scroll-lg { max-height: 75svh; }
}

/* Loading overlay inside a card */
.dv2-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--sk-bg) 70%, transparent);
  backdrop-filter: blur(2px);
  color: var(--sk-text-2);
  border-radius: inherit;
}

/* Legacy "hidden until a server is selected" wrappers */
.dv2-empty-hint { color: var(--sk-muted); font-size: 0.9rem; }

/* Sub-tabs inside a tab (sheet tabs, trader rail, etc.) */
.sheet-tab, .map-sheet-tab {
  flex: 1;
  min-width: 80px;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sk-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sheet-tab.active, .map-sheet-tab.active { color: var(--sk-primary-text); border-bottom-color: var(--sk-primary); }
/* The Gamertag Links panel is shared with the admin panel
   (views/partials/gametag-links.ejs), so it keeps its own markup. It puts a
   flex-1 input and the Search button on one row that never wraps, and below
   ~360px the button is pushed past the card's clipped edge and cannot be
   tapped. Let that row wrap on this page instead of forking the partial. */
/* The shared trader panel's "View all" / "Catalog" shortcuts are 19px-tall
   text links sitting beside a heading, so the WCAG inline-target exception
   does not cover them. Grow the hit area here with padding cancelled by an
   equal negative margin, so they stay where they look without forking the
   partial (the standalone /trader page renders it too).

   Match the underline, NOT the bare attribute: trader.js puts
   data-trader-goto on the overview's stat cards and health chips too, and
   `display: inline-flex` turned each stat card's three stacked lines
   ("Pending orders" / "0" / "All clear") into one flex row. Only the two
   underlined text links want this. */
#trader-tab button[data-trader-goto].underline {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.3rem 0.55rem;
  margin: -0.3rem -0.55rem;
  border-radius: var(--sk-radius-sm);
}
@media (pointer: coarse) {
  #trader-tab button[data-trader-goto].underline { min-height: 44px; padding-inline: 0.8rem; margin-inline: -0.8rem; }
}

#gametag-links-tab .flex.gap-2 { flex-wrap: wrap; }
#gametag-links-tab #gametag-link-search { flex: 1 1 12rem; min-width: 0; }
#gametag-links-tab #gametag-link-search-btn { flex: 0 0 auto; }

/* ftpManager.js emits `breadcrumb-item` on every crumb it renders and finds
   the clicked one with closest('.breadcrumb-item'), so the static first crumb
   must carry it too. It is a behaviour hook, not a look. */
.breadcrumb-item { cursor: pointer; }

/* The broadcast countdown is the one number on the page meant to be read from
   across a room; the classic page stepped it up a size on wider screens. */
.dv2-countdown { font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); }

/* Marker classes: heatmap.js / map.js query these to find the sheet's panes
   and toggle `hidden` on the one that matches the picked tab. They carry no
   styling of their own, but the partials must keep them. */
.sheet-content, .map-sheet-content { min-width: 0; }

/* Bulk of the classic dashboard's JS-controlled overlays: a wrapper toggled
   with .hidden that centers a Skynet modal box. */
.dv2-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  background: rgba(3, 6, 12, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.dv2-overlay .sk-modal-box { transform: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.dv2-overlay .sk-modal-box.sk-modal-xl { max-width: 960px; }
.dv2-overlay .sk-modal-box.dv2-modal-full { max-width: min(96vw, 1200px); height: calc(100dvh - 2rem); display: flex; flex-direction: column; }
.dv2-overlay .dv2-modal-full .sk-modal-body { flex: 1; min-height: 0; overflow: auto; }
@media (max-width: 639px) {
  .dv2-overlay { padding: 0; align-items: flex-end; }
  .dv2-overlay .sk-modal-box { max-height: 92dvh; border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0; }
  .dv2-overlay .sk-modal-box.dv2-modal-full { height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
/* Keep modal headers on screen while the body scrolls */
.dv2-overlay .sk-modal-header, .sk-modal .sk-modal-header { position: sticky; top: 0; background: var(--sk-surface); z-index: 1; }

/* Overview quick actions: a card that is really a button, so it needs the
   button reset undone and a full-width block box. */
.ov-action {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--sk-border);
  transition: border-color var(--sk-transition), transform var(--sk-transition);
}
.ov-action:hover { border-color: color-mix(in srgb, var(--sk-primary) 45%, transparent); }
.ov-action:active { transform: scale(0.995); }
.ov-action:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
.ov-action .dv2-stat-body strong { display: block; font-weight: 600; }
.ov-action .dv2-stat-body span { display: block; }

/* Command palette rows */
#dv2-cmdk .sk-cmdk-list a { display: flex; align-items: center; gap: 0.6rem; }
#dv2-cmdk .sk-cmdk-list a .dv2-nav-icon { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; }
#dv2-cmdk .sk-cmdk-list a small { margin-left: auto; color: var(--sk-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   Classes the shared tab scripts inject (formerly dashboard-enhanced.css),
   re-expressed with theme tokens.
   -------------------------------------------------------------------------- */
.enhanced-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
  padding: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.enhanced-card:hover { border-color: var(--sk-border-2); }
.section-header-enhanced {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--sk-border);
  margin-bottom: 1.25rem;
}
.section-header-enhanced h2 { font-size: 1.1rem; font-weight: 650; color: var(--sk-text); margin: 0; }
.section-header-enhanced .icon { width: 1.6rem; height: 1.6rem; color: var(--sk-primary-text); flex: none; }
.btn-enhanced, .btn-sm-enhanced {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  position: relative; overflow: hidden;
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  padding: 0.55rem 1.1rem; min-height: 40px;
  border-radius: var(--sk-radius-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-sm-enhanced { padding: 0.35rem 0.75rem; min-height: 34px; font-size: 0.75rem; }
.btn-enhanced:active, .btn-sm-enhanced:active { transform: scale(0.97); }
.btn-primary-enhanced { background: var(--sk-primary); color: #fff; border: 1px solid var(--sk-primary); }
.btn-primary-enhanced:hover { background: var(--sk-primary-hover); }
.btn-danger-enhanced { background: var(--sk-danger); color: #fff; border: 1px solid var(--sk-danger); }
.btn-success-enhanced { background: var(--sk-success); color: #fff; border: 1px solid var(--sk-success); }
.btn-secondary-enhanced { background: var(--sk-surface-2); color: var(--sk-text); border: 1px solid var(--sk-border-2); }
.btn-secondary-enhanced:hover { background: var(--sk-border-2); }
.input-enhanced, .select-enhanced {
  background: var(--sk-bg); border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius-sm);
  padding: 0.55rem 0.85rem; color: var(--sk-text); width: 100%;
}
.input-enhanced:focus, .select-enhanced:focus { outline: none; border-color: var(--sk-primary); box-shadow: 0 0 0 3px var(--sk-primary-soft); }
.toggle-enhanced { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.toggle-enhanced input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--sk-border-2); transition: 0.2s; border-radius: 9999px; }
/* The knob is white against both a dark OFF track and a coloured ON one, but
   on a light palette the OFF track is a pale grey (~1.2:1 against white) and
   the knob disappears. The shadow gives it an edge on any track in either
   mode, which is what a switch needs anyway. */
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: 0.2s; border-radius: 50%; }
.toggle-enhanced input:checked + .toggle-slider { background: var(--sk-primary); }
.toggle-enhanced input:focus-visible + .toggle-slider { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
.toggle-enhanced input:checked + .toggle-slider:before { transform: translateX(18px); }
.badge-enhanced { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-success { background: var(--sk-success-soft); color: var(--sk-success-text); border: 1px solid transparent; }
.badge-danger { background: var(--sk-danger-soft); color: var(--sk-danger-text); border: 1px solid transparent; }
.badge-warning { background: var(--sk-warning-soft); color: var(--sk-warning-text); border: 1px solid transparent; }
.badge-info { background: var(--sk-info-soft); color: var(--sk-info-text); border: 1px solid transparent; }
.badge-purple, .badge-primary { background: var(--sk-primary-soft); color: var(--sk-primary-text); border: 1px solid transparent; }
.badge-secondary { background: var(--sk-surface-2); color: var(--sk-text-2); border: 1px solid var(--sk-border-2); }
.alert-enhanced { padding: 0.9rem 1.1rem; border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border-2); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; background: var(--sk-surface); color: var(--sk-text-2); }
.alert-enhanced.alert-info { background: var(--sk-info-soft); border-color: color-mix(in srgb, var(--sk-info) 40%, transparent); color: var(--sk-info-text); }
.alert-enhanced.alert-success { background: var(--sk-success-soft); border-color: color-mix(in srgb, var(--sk-success) 40%, transparent); color: var(--sk-success-text); }
.alert-enhanced.alert-warning { background: var(--sk-warning-soft); border-color: color-mix(in srgb, var(--sk-warning) 40%, transparent); color: var(--sk-warning-text); }
.alert-enhanced.alert-danger { background: var(--sk-danger-soft); border-color: color-mix(in srgb, var(--sk-danger) 40%, transparent); color: var(--sk-danger-text); }
.spinner-enhanced { border: 3px solid var(--sk-border-2); border-radius: 50%; border-top-color: var(--sk-primary); width: 40px; height: 40px; animation: dv2-spin 0.8s linear infinite; }
.progress-enhanced { width: 100%; height: 8px; background: var(--sk-surface-2); border-radius: 9999px; overflow: hidden; }
.progress-bar-enhanced { height: 100%; background: var(--sk-primary); border-radius: 9999px; transition: width 0.5s ease; }
.stat-card-enhanced { position: relative; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 1.25rem; overflow: hidden; }
.glass-effect { background: color-mix(in srgb, var(--sk-surface) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--sk-border); }
.table-enhanced { width: 100%; border-collapse: collapse; }
.table-enhanced th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sk-muted); border-bottom: 1px solid var(--sk-border); }
.table-enhanced td { padding: 0.75rem 1rem; color: var(--sk-text-2); border-bottom: 1px solid var(--sk-border); }
.table-enhanced tbody tr:hover { background: var(--sk-surface-2); }
/* Admin/beta bypass banner rendered by the controller */
.tab-bypass-banner {
  background: var(--sk-warning-soft);
  border: 1px solid color-mix(in srgb, var(--sk-warning) 50%, transparent);
  border-radius: var(--sk-radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--sk-text);
  animation: dv2-tab-in 0.3s ease-out;
}
.tab-banner-icon { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: color-mix(in srgb, var(--sk-warning) 25%, transparent); border-radius: 50%; font-size: 1.1rem; color: var(--sk-warning-text); flex: none; }
.tab-banner-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tab-banner-message { font-size: 0.85rem; color: var(--sk-text-2); line-height: 1.5; }
.tab-banner-close { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--sk-radius-sm); color: var(--sk-muted); cursor: pointer; flex: none; }
.tab-banner-close:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.badge-admin, .badge-beta { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.badge-admin { background: var(--sk-danger); }
.badge-beta { background: var(--sk-info); }
@keyframes dv2-spin { to { transform: rotate(360deg); } }
@keyframes slideOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }

/* --------------------------------------------------------------------------
   Bootstrap-style vocabulary used by the Graves, Quests and POI scripts
   (unstyled on the classic dashboard). Mapped onto Skynet components.

   Every selector below is wrapped in :where() so it contributes class-level
   specificity only. The #dash-v2 prefix is here to keep these very generic
   names (.btn, .card, .badge, .table) contained, not to win fights: the tab
   scripts routinely pair them with a utility — `class="stat-value
   text-green-400"`, `class="value text-danger"` — and an id would silently
   beat that utility, which is how the Nitrado server status lost its
   green/red colour.
   -------------------------------------------------------------------------- */
/* Several scripts write a modifier on its own - log-testing.js's
   `class="btn-primary"`, setup.js's `class="btn-primary px-6"` - with no `btn`
   alongside it. Those used to pick up the colour below and none of the box, so
   the button came out with no padding and its icon jammed against the edge.
   Every modifier carries the base box for that reason; the colour rules that
   follow still win on the properties they set. */
:where(#dash-v2) .btn,
:where(#dash-v2) .btn-primary,
:where(#dash-v2) .btn-secondary,
:where(#dash-v2) .btn-danger,
:where(#dash-v2) .btn-success,
:where(#dash-v2) .btn-warning,
:where(#dash-v2) .btn-info,
:where(#dash-v2) .btn-outline-primary,
:where(#dash-v2) .btn-outline-danger,
:where(#dash-v2) .btn-outline-warning {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 1rem; min-height: 40px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.3;
  color: var(--sk-text); background: var(--sk-surface-2);
  border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius-sm);
  cursor: pointer; white-space: nowrap; transition: background var(--sk-transition), border-color var(--sk-transition);
}
:where(#dash-v2) .btn:hover { background: var(--sk-border-2); }
:where(#dash-v2) .btn-sm { padding: 0.3rem 0.65rem; min-height: 32px; font-size: 0.8rem; }
:where(#dash-v2) .btn-primary { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
:where(#dash-v2) .btn-primary:hover { background: var(--sk-primary-hover); }
:where(#dash-v2) .btn-secondary { background: var(--sk-surface-2); border-color: var(--sk-border-2); color: var(--sk-text); }
:where(#dash-v2) .btn-danger { background: var(--sk-danger); border-color: var(--sk-danger); color: #fff; }
:where(#dash-v2) .btn-danger:hover { background: var(--sk-danger-hover); }
:where(#dash-v2) .btn-success { background: var(--sk-success); border-color: var(--sk-success); color: #fff; }
:where(#dash-v2) .btn-warning { background: var(--sk-warning); border-color: var(--sk-warning); color: #1a1a2e; }
:where(#dash-v2) .btn-info { background: var(--sk-info); border-color: var(--sk-info); color: #0b1220; }
:where(#dash-v2) .btn-outline-primary { background: transparent; border-color: var(--sk-primary); color: var(--sk-primary-text); }
:where(#dash-v2) .btn-outline-danger { background: transparent; border-color: var(--sk-danger); color: var(--sk-danger-text); }
:where(#dash-v2) .btn-outline-warning { background: transparent; border-color: var(--sk-warning); color: var(--sk-warning-text); }
:where(#dash-v2) .btn-group-vertical { display: inline-flex; flex-direction: column; gap: 0.25rem; }
:where(#dash-v2) .form-group { margin-bottom: 1rem; }
:where(#dash-v2) .form-group > label, :where(#dash-v2) .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--sk-text-2); margin-bottom: 0.35rem; }
:where(#dash-v2) .form-control, :where(#dash-v2) .form-input {
  display: block; width: 100%; padding: 0.55rem 0.85rem; font-size: 16px;
  color: var(--sk-text); background: var(--sk-bg);
  border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius-sm);
  transition: border-color var(--sk-transition), box-shadow var(--sk-transition);
}
:where(#dash-v2) .form-control:focus { outline: none; border-color: var(--sk-primary); box-shadow: 0 0 0 3px var(--sk-primary-soft); }
:where(#dash-v2) textarea.form-control { resize: vertical; min-height: 80px; }
:where(#dash-v2) select.form-control { cursor: pointer; }
:where(#dash-v2) .form-text, :where(#dash-v2) small { font-size: 0.8rem; color: var(--sk-muted); }
:where(#dash-v2) .form-row, :where(#dash-v2) .row { display: flex; flex-wrap: wrap; gap: 1rem; }
:where(#dash-v2) .col-md-3, :where(#dash-v2) .col-md-4, :where(#dash-v2) .col-md-6 { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) {
  :where(#dash-v2) .col-md-3 { flex-basis: calc(25% - 0.75rem); }
  :where(#dash-v2) .col-md-4 { flex-basis: calc(33.333% - 0.67rem); }
  :where(#dash-v2) .col-md-6 { flex-basis: calc(50% - 0.5rem); }
}
:where(#dash-v2) .d-flex { display: flex; }
:where(#dash-v2) .justify-content-between { justify-content: space-between; }
:where(#dash-v2) .align-items-center { align-items: center; }
:where(#dash-v2) .align-items-start { align-items: flex-start; }
:where(#dash-v2) .flex-grow-1 { flex-grow: 1; }
:where(#dash-v2) .custom-control.custom-switch { display: flex; align-items: center; gap: 0.6rem; }
:where(#dash-v2) .custom-control-input { accent-color: var(--sk-primary); width: 1.1rem; height: 1.1rem; }
:where(#dash-v2) .card { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); }
:where(#dash-v2) .card-body { padding: 1.1rem; }
:where(#dash-v2) .card-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; }
:where(#dash-v2) .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; background: var(--sk-surface-2); color: var(--sk-text-2); border: 1px solid var(--sk-border-2); }
:where(#dash-v2) .alert { padding: 0.9rem 1.1rem; border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border-2); background: var(--sk-surface); color: var(--sk-text-2); margin-bottom: 1rem; }
:where(#dash-v2) .alert-warning { background: var(--sk-warning-soft); border-color: color-mix(in srgb, var(--sk-warning) 40%, transparent); color: var(--sk-warning-text); }
:where(#dash-v2) .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
:where(#dash-v2) .table th { text-align: left; padding: 0.6rem 0.8rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sk-muted); border-bottom: 1px solid var(--sk-border); }
:where(#dash-v2) .table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--sk-border); color: var(--sk-text-2); }
:where(#dash-v2) .table-sm th, :where(#dash-v2) .table-sm td { padding: 0.4rem 0.6rem; }
:where(#dash-v2) .text-danger { color: var(--sk-danger-text); }
:where(#dash-v2) .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
:where(#dash-v2) .stat-card, :where(#dash-v2) .stat-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); }
:where(#dash-v2) .stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--sk-primary-soft); color: var(--sk-primary-text); flex: none; font-size: 1.1rem; }
:where(#dash-v2) .stat-content { min-width: 0; }
:where(#dash-v2) .stat-value { font-size: 1.4rem; font-weight: 700; color: var(--sk-text); line-height: 1.2; }
:where(#dash-v2) .stat-label { font-size: 0.72rem; color: var(--sk-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
:where(#dash-v2) .info-row, :where(#dash-v2) .detail-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--sk-border); font-size: 0.875rem; }
:where(#dash-v2) .info-row:last-child, :where(#dash-v2) .detail-item:last-child { border-bottom: none; }
:where(#dash-v2) .info-row .label, :where(#dash-v2) .detail-item .label { color: var(--sk-muted); flex: none; }
:where(#dash-v2) .info-row .value, :where(#dash-v2) .detail-item .value { color: var(--sk-text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
:where(#dash-v2) .grave-card, :where(#dash-v2) .quest-card { background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 1rem; margin-bottom: 0.9rem; }
:where(#dash-v2) .quest-card.inactive { opacity: 0.7; }
:where(#dash-v2) .grave-header, :where(#dash-v2) .quest-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
:where(#dash-v2) .grave-header h3, :where(#dash-v2) .quest-header h3, :where(#dash-v2) .quest-name { font-size: 1rem; font-weight: 600; margin: 0; }
:where(#dash-v2) .grave-actions, :where(#dash-v2) .quest-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
:where(#dash-v2) .grave-status, :where(#dash-v2) .quest-status { margin-left: 0.4rem; font-size: 0.85rem; color: var(--sk-muted); }
:where(#dash-v2) .quest-description { color: var(--sk-text-2); font-size: 0.9rem; margin-bottom: 0.6rem; }
:where(#dash-v2) .objectives-list, :where(#dash-v2) .items-list, :where(#dash-v2) .visits-list, :where(#dash-v2) .top-deaths-list, :where(#dash-v2) .popular-quests-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
:where(#dash-v2) .objective-item, :where(#dash-v2) .item, :where(#dash-v2) .visit { display: flex; gap: 0.6rem; align-items: center; padding: 0.45rem 0.7rem; background: var(--sk-surface-2); border-radius: var(--sk-radius-sm); font-size: 0.85rem; flex-wrap: wrap; }
:where(#dash-v2) .obj-number, :where(#dash-v2) .rank { font-weight: 700; color: var(--sk-primary-text); }
:where(#dash-v2) .obj-type { color: var(--sk-muted); }
:where(#dash-v2) .top-deaths-section, :where(#dash-v2) .popular-quests-section, :where(#dash-v2) .config-section { margin-top: 1.25rem; }
:where(#dash-v2) .no-data, :where(#dash-v2) .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--sk-muted); border: 1px dashed var(--sk-border-2); border-radius: var(--sk-radius-lg); }
:where(#dash-v2) .details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem 1.5rem; }
:where(#dash-v2) .leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
:where(#dash-v2) .leaderboard-table th, :where(#dash-v2) .leaderboard-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--sk-border); text-align: left; }
:where(#dash-v2) .rank-cell { width: 3rem; font-weight: 700; color: var(--sk-primary-text); }
:where(#dash-v2) .difficulty-easy { color: var(--sk-success-text); }
:where(#dash-v2) .difficulty-medium { color: var(--sk-warning-text); }
:where(#dash-v2) .difficulty-hard, :where(#dash-v2) .difficulty-extreme { color: var(--sk-danger-text); }
:where(#dash-v2) .bg-dark { background: var(--sk-surface); }
:where(#dash-v2) .modal-dialog { width: 100%; max-width: 640px; margin: auto; }
:where(#dash-v2) .modal-dialog.modal-lg { max-width: 860px; }
:where(#dash-v2) .modal-content { background: var(--sk-surface); border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-lg); max-height: calc(100dvh - 2rem); overflow-y: auto; }
:where(#dash-v2) .modal-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
:where(#dash-v2) .close { font-size: 1.5rem; line-height: 1; color: var(--sk-muted); background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   Legacy modal + form vocabulary (POI / radar dialogs) — ported from the
   classic page's inline styles.
   -------------------------------------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay { position: absolute; inset: 0; background-color: rgba(3, 6, 12, 0.7); backdrop-filter: blur(3px); cursor: pointer; }
.modal-container {
  position: relative;
  background-color: var(--sk-surface);
  border: 1px solid var(--sk-border-2);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  z-index: 1;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--sk-border); font-weight: 600; }
.modal-header h3, .modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-close { background: none; border: none; color: var(--sk-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--sk-radius-sm); transition: color 0.2s; }
.modal-close:hover { color: var(--sk-text); }
.modal-body { padding: 1.35rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.35rem; border-top: 1px solid var(--sk-border); flex-wrap: wrap; }
.form-checkbox { width: 1rem; height: 1rem; cursor: pointer; margin-right: 0.5rem; accent-color: var(--sk-primary); }
.checkbox-label { display: flex; align-items: center; color: var(--sk-text-2); font-size: 0.875rem; cursor: pointer; }
.coordinates-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 640px) {
  .modal-container { max-height: 95dvh; }
  .modal-header, .modal-body, .modal-footer { padding: 1rem; }
  .coordinates-group { grid-template-columns: 1fr; }
  .modal-mobile-fullscreen { min-height: 100dvh; border-radius: 0; }
  .form-grid-mobile { grid-template-columns: 1fr !important; }
}
@media (min-width: 641px) and (max-width: 1024px) { .tablet-grid-2 { grid-template-columns: repeat(2, 1fr) !important; } }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.hidden-mobile { }
@media (max-width: 1023px) { #heatmap-stats-pill .hidden-mobile { display: none; } }

/* --------------------------------------------------------------------------
   Maps: Leaflet, heatmap, interactive map, polygon zones (ported)
   -------------------------------------------------------------------------- */
#heatmap-map, #interactive-map { height: 700px; background: var(--sk-surface); border-radius: var(--sk-radius); }
.map-container-responsive { height: 700px; }
@media (max-width: 1023px) {
  .map-container-responsive { height: calc(100svh - 180px); min-height: 400px; }
  #heatmap-map { height: calc(100svh - 200px); min-height: 400px; }
}
@media (max-width: 768px) { #heatmap-map { height: 450px; border-radius: var(--sk-radius); } }
@media (max-width: 480px) { #heatmap-map { height: 380px; } }

#heatmap-mobile-sheet, #map-mobile-sheet {
  pointer-events: auto !important;
  touch-action: pan-y;
  isolation: isolate;
  position: fixed !important;
  background: var(--sk-surface);
  border-top: 1px solid var(--sk-border-2);
  box-shadow: var(--sk-shadow-lg);
  padding-bottom: env(safe-area-inset-bottom);
}
#heatmap-mobile-sheet.open, #map-mobile-sheet.open { transform: translateY(0) !important; }
#heatmap-mobile-sheet.peek { transform: translateY(calc(100% - 60px)) !important; }
#heatmap-fab, #map-fab {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: auto !important;
  isolation: isolate;
  position: fixed !important;
  bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  background: var(--sk-primary);
  color: #fff;
  box-shadow: 0 10px 25px -8px color-mix(in srgb, var(--sk-primary) 70%, transparent);
}
#heatmap-fab.hidden-fab, #map-fab.hidden-fab { transform: scale(0); opacity: 0; pointer-events: none !important; }
#heatmap-backdrop, #map-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 10003;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#heatmap-backdrop.active, #map-backdrop.active { opacity: 1; pointer-events: auto; }
@media (max-width: 1023px) {
  .heatmap-checkbox { min-height: 44px; padding: 12px; }
  #heatmap-tools-panel, #heatmap-layers-panel, #heatmap-legend-bar { display: none !important; }
  #heatmap-stats-pill { padding: 6px 12px; font-size: 11px; }
}
#skynet-support-widget { display: none !important; }

.town-label-icon, .poi-marker-icon, .player-marker-icon, .search-marker-icon { background: transparent !important; border: none !important; }
.town-label { white-space: nowrap; pointer-events: none; user-select: none; }
.poi-marker { display: flex; align-items: center; justify-content: center; font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.player-marker { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.search-marker { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.search-marker-dot { width: 12px; height: 12px; background: var(--sk-primary); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--sk-primary) 60%, transparent); z-index: 2; }
.search-marker-pulse { position: absolute; width: 40px; height: 40px; background: color-mix(in srgb, var(--sk-primary) 40%, transparent); border-radius: 50%; animation: search-pulse 1.5s ease-out infinite; }
@keyframes search-pulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.leaflet-container { background: var(--sk-surface) !important; font-family: var(--sk-font); }
#heatmap-canvas-container, #heatmap-map, .leaflet-container, .leaflet-pane { pointer-events: auto; }
.leaflet-overlay-pane { pointer-events: none; }
.leaflet-overlay-pane > * { pointer-events: auto; }
.leaflet-control-zoom { border: 2px solid color-mix(in srgb, var(--sk-primary) 30%, transparent) !important; }
.leaflet-control-zoom a { background-color: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important; color: var(--sk-text) !important; border-bottom: 1px solid color-mix(in srgb, var(--sk-primary) 20%, transparent) !important; }
/* White needs a solid fill under it. Over a 20% tint it was legible only
   because the control sat on a dark page; on a light palette the same tint is
   pale and the glyph vanished. */
.leaflet-control-zoom a:hover { background-color: var(--sk-primary) !important; color: #fff !important; }
.leaflet-control-layers { background: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important; border: 2px solid color-mix(in srgb, var(--sk-primary) 30%, transparent) !important; border-radius: 8px !important; padding: 10px !important; box-shadow: var(--sk-shadow-lg) !important; }
.leaflet-control-layers-toggle { background-color: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important; border: 2px solid color-mix(in srgb, var(--sk-primary) 30%, transparent) !important; width: 44px !important; height: 44px !important; }
.leaflet-control-layers-overlays { color: var(--sk-text) !important; }
.leaflet-control-layers label { color: var(--sk-text) !important; font-weight: 500 !important; padding: 8px !important; display: flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; cursor: pointer !important; }
.leaflet-control-layers label:hover { background: var(--sk-primary-soft) !important; border-radius: 4px !important; }
.leaflet-control-layers-selector { margin-right: 8px !important; width: 20px !important; height: 20px !important; }
@media (max-width: 768px) {
  .map-text-branding-centered { bottom: 8px !important; }
  .leaflet-control-layers { max-width: calc(100vw - 100px); }
  .leaflet-control-layers label { font-size: 13px !important; padding: 8px !important; min-height: 44px !important; }
  .leaflet-control-zoom a { width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 20px !important; }
  .leaflet-top.leaflet-left { top: 12px; left: 12px; }
  .leaflet-top.leaflet-right { top: 12px; right: 12px; }
}
@media (max-width: 480px) {
  .leaflet-control-layers label { font-size: 12px !important; }
  .heatmap-server-name { font-size: 14px !important; }
  .heatmap-website { font-size: 11px !important; }
  .pz-map-legend { padding: 6px 10px !important; font-size: 11px !important; max-width: 140px !important; }
}
.leaflet-draw-section { border: none !important; }
.leaflet-draw-toolbar { background: none !important; border: none !important; margin-top: 0 !important; }
/* Leaflet.draw ships dark icons meant for a white control. The dashboard
   inverts them so they read on a dark page — which on a light palette turns
   them white on white. The filter is a variable so the mode can switch it off;
   `--dv2-leaflet-icons` is set once per mode below, off `data-theme-mode`, so
   this file never has to carry a list of which themes are light. */
.leaflet-draw-toolbar a { border-radius: 6px !important; width: 36px !important; height: 36px !important; line-height: 36px !important; margin-bottom: 4px !important; filter: var(--dv2-leaflet-icons) !important; }
.leaflet-draw-toolbar a:hover { filter: var(--dv2-leaflet-icons) brightness(1.4) !important; }
.leaflet-draw-actions { background: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important; border: 1px solid color-mix(in srgb, var(--sk-primary) 30%, transparent) !important; border-radius: 6px !important; padding: 2px !important; left: 40px !important; }
.leaflet-draw-actions li:first-child a { border-radius: 4px 4px 0 0 !important; }
.leaflet-draw-actions li:last-child a { border-radius: 0 0 4px 4px !important; }
.leaflet-draw-actions a { background-color: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important; color: var(--sk-text) !important; border: none !important; font-size: 12px !important; padding: 5px 10px !important; line-height: 1.3 !important; filter: none !important; }
.leaflet-draw-actions a:hover { background-color: var(--sk-primary) !important; color: #fff !important; filter: none !important; }
.leaflet-draw-tooltip { background: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important; border: 1px solid color-mix(in srgb, var(--sk-primary) 30%, transparent) !important; color: var(--sk-text) !important; border-radius: 6px !important; font-size: 12px !important; padding: 6px 10px !important; }
.leaflet-draw-tooltip-subtext { color: var(--sk-muted) !important; }
#pz-map .leaflet-div-icon { background: color-mix(in srgb, var(--sk-primary) 90%, transparent) !important; border: 2px solid #c4b5fd !important; border-radius: 50% !important; width: 12px !important; height: 12px !important; margin-left: -6px !important; margin-top: -6px !important; box-shadow: 0 0 6px color-mix(in srgb, var(--sk-primary) 60%, transparent); }
#pz-map .leaflet-editing-icon.leaflet-touch-icon { width: 10px !important; height: 10px !important; margin-left: -5px !important; margin-top: -5px !important; background: color-mix(in srgb, var(--sk-primary) 50%, transparent) !important; border: 2px solid rgba(196, 181, 253, 0.5) !important; }
#pz-map .leaflet-edit-marker-selected { background-color: var(--sk-primary-soft) !important; border: 3px dashed color-mix(in srgb, var(--sk-primary) 70%, transparent) !important; border-radius: 50% !important; }
#pz-map .leaflet-mouse-marker { background-color: transparent !important; cursor: crosshair; }
#pz-map .leaflet-draw-guide-dash { background: var(--sk-primary) !important; border-radius: 50% !important; opacity: 0.7 !important; }
.leaflet-draw.leaflet-control { display: none !important; }
.pz-dt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--sk-surface-2); border: 1px solid var(--sk-border-2); border-radius: var(--sk-radius); padding: 8px 10px; }
.pz-dt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pz-dt-row.pz-dt-hidden { display: none; }
.pz-dt-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; min-height: 36px; border-radius: var(--sk-radius-sm); background: var(--sk-surface); border: 1px solid var(--sk-border-2); color: var(--sk-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; }
.pz-dt-btn:hover { background: var(--sk-border-2); color: var(--sk-text); border-color: color-mix(in srgb, var(--sk-primary) 60%, transparent); }
.pz-dt-primary { background: color-mix(in srgb, var(--sk-primary) 28%, transparent); border-color: color-mix(in srgb, var(--sk-primary) 65%, transparent); color: var(--sk-primary-text); }
.pz-dt-primary:hover { background: color-mix(in srgb, var(--sk-primary) 45%, transparent); border-color: var(--sk-primary); }
.pz-dt-danger, .pz-dt-cancel { color: var(--sk-danger-text); border-color: color-mix(in srgb, var(--sk-danger) 45%, transparent); }
.pz-dt-danger:hover, .pz-dt-cancel:hover { background: color-mix(in srgb, var(--sk-danger) 25%, transparent); border-color: var(--sk-danger); color: var(--sk-danger-text); }
.pz-dt-apply { background: color-mix(in srgb, var(--sk-success) 25%, transparent); border-color: color-mix(in srgb, var(--sk-success) 60%, transparent); color: var(--sk-success-text); }
.pz-dt-apply:hover { background: color-mix(in srgb, var(--sk-success) 40%, transparent); border-color: var(--sk-success); }
.pz-log-marker { position: relative; }
.pz-log-marker-dot { position: absolute; left: 7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--sk-danger); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.pz-log-marker-pulse { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--sk-danger) 45%, transparent); animation: pz-pulse 1.6s ease-out infinite; }
@keyframes pz-pulse { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
.pz-dt-hint { color: var(--sk-primary-text); font-size: 12px; font-weight: 500; line-height: 1.35; flex: 1; min-width: 140px; }
@media (max-width: 640px) { .pz-dt-btn { padding: 7px 10px; font-size: 12px; } }
.hotspot-tooltip { background: color-mix(in srgb, var(--sk-primary) 95%, transparent) !important; border: 2px solid #ff00ff !important; color: #fff !important; font-weight: bold !important; padding: 8px 12px !important; border-radius: 6px !important; box-shadow: var(--sk-shadow-lg) !important; }
.hotspot-tooltip::before { border-top-color: #ff00ff !important; }
.map-text-overlay { pointer-events: none !important; z-index: 1000 !important; }
.map-text-overlay div { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)); -webkit-font-smoothing: antialiased; }
.map-text-branding { background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: none !important; }
.map-text-branding-centered { background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: none !important; position: absolute !important; bottom: 10px !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; z-index: 1000 !important; }
.leaflet-bottom.leaflet-left { pointer-events: none !important; }

/* Heatmap floating glass panels */
.heatmap-glass-panel { background: color-mix(in srgb, var(--sk-bg) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--sk-primary) 18%, transparent); box-shadow: var(--sk-shadow-lg); }
.heatmap-glass-pill { background: color-mix(in srgb, var(--sk-bg) 82%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--sk-primary) 22%, transparent); border-radius: 9999px; }
.heatmap-tool-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--sk-muted); background: transparent; border-radius: 8px; transition: all 0.15s ease; font-size: 14px; border: none; cursor: pointer; }
.heatmap-tool-btn:hover { color: var(--sk-text); background: var(--sk-primary-soft); }
.heatmap-tool-btn.active { color: var(--sk-primary-text); background: var(--sk-primary-soft); box-shadow: 0 0 12px color-mix(in srgb, var(--sk-primary) 30%, transparent); }
#heatmap-stats-pill { animation: heatmapSlideDown 0.3s ease-out; }
#heatmap-tools-panel { animation: heatmapSlideRight 0.3s ease-out; }
#heatmap-layers-panel { animation: heatmapSlideLeft 0.3s ease-out 0.1s both; }
#heatmap-legend-bar { animation: heatmapSlideUp 0.3s ease-out 0.15s both; }
@keyframes heatmapSlideDown { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes heatmapSlideRight { from { opacity: 0; transform: translateY(-50%) translateX(-20px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
@keyframes heatmapSlideLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heatmapSlideUp { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.heatmap-layer-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease; }
.heatmap-layer-item:hover { background: var(--sk-surface-2); }
.heatmap-layer-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sk-primary); }

/* --------------------------------------------------------------------------
   Touch, motion and print
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  #dash-v2 .sk-btn-sm { min-height: 40px; }
  #dash-v2 .clickable { min-height: 44px; min-width: 44px; }
}
@media (hover: none) { .touch-show-always { opacity: 1 !important; } }
@media (prefers-reduced-motion: reduce) {
  .tab-content.active, .tab-bypass-banner, #heatmap-stats-pill, #heatmap-tools-panel, #heatmap-layers-panel, #heatmap-legend-bar { animation: none; }
  .dv2-sidebar, #heatmap-mobile-sheet, #map-mobile-sheet { transition: none !important; }
}
@media print {
  /* The site header hides itself — see the print block in header-v2.css. */
  .dv2-sidebar, .dv2-topbar, #heatmap-fab, #map-fab { display: none !important; }
  .dv2-main { padding: 0; }
}

/* --------------------------------------------------------------------------
   Last word: `hidden` beats every display rule above it (see the note near
   the top of this file for why this is not !important).
   -------------------------------------------------------------------------- */
.dv2 .hidden,
.dv2 [hidden] { display: none; }

/* The one rule that has to know which way round the page is, rather than which
   colours it uses. Derived from the registry and written onto <html> by the
   view, so adding a light palette needs no edit here. */
[data-theme-mode="light"] {
  --dv2-leaflet-icons: none;
}

/* Skynet UI hardcodes `.sk-sidebar a.active { color: #c7d2fe }` — a pale
   indigo, not a token, so it does not follow the palette. On a dark sidebar it
   reads fine; on a light one it is 1.2:1 against the active row's tint, which
   is the active section's own label unreadable. Put it back on the token the
   rest of the active styling already uses. Reported by
   scripts/themes/contrast-audit.js; re-check if the framework is upgraded. */
.sk-sidebar a.active { color: var(--sk-primary-text); }

/* Skynet UI's `.text-primary` is the accent itself, which is a FILL colour:
   as text on the page background it measured 3.14:1 on the default palette.
   The heat-slider readouts are body-size text, so they take the accent's
   readable variant instead. Named rather than reusing `.text-primary-text`
   so it is obvious at the call site which one is the text one. */
.text-primary-strong { color: var(--sk-primary-text); }

/* public/js/tabs/stats.js injects the five leaderboard cards, and puts
   Tailwind's `truncate` on the player name. `truncate` cannot do anything
   while the flex item holding it sits at its default `min-width: auto` — which
   is its MIN-CONTENT width, not zero — so a 33-character gamertag with no
   spaces sized the whole row and `.sk-card` (overflow: hidden) cut it off:
   224px past the card on a 320px phone, 184px at 360. Found by
   `npm run audit:mobile`, which measures against the nearest clipping
   ancestor; `documentElement.scrollWidth` never moved.

   Opened here rather than in the script, which /dashboard and /stats share
   byte-for-byte. Deliberately not `#leaderboards-container *`: the medal
   column carries `min-w-[2rem]` to keep the ranks aligned, and an id-scoped
   universal selector would outrank it. */
#leaderboards-container,
#leaderboards-container > *,
#leaderboards-container .space-y-2 > *,
#leaderboards-container .items-center.gap-3,
#leaderboards-container .truncate {
  min-width: 0;
}