/* Sub-menus as segmented controls with a purple pill (user, 2026-11-12): every tab bar (<nav> of .tab links - game
   page, dashboard, messages, section bars, admin) and every [data-seg] group (game page Creators / Videos, the small
   sort toggles: data-seg="sm"). assets/seg.js slides the pill between items; without it the active item is simply
   purple. Unlayered on purpose: it wins over the Tailwind utilities still on the old wrappers (border-b ...). */
:root { --seg-on: #9146ff; }

nav:has(> a.tab), [data-seg] {
  position: relative; display: flex; gap: 4px; padding: 4px; margin-top: 50px;
  border: 1px solid var(--color-line, #1e2a37); border-radius: 12px; background: var(--color-surface, #0f161f);
  overflow-x: auto; scrollbar-width: none;
}
nav:has(> a.tab)::-webkit-scrollbar, [data-seg]::-webkit-scrollbar { display: none; }
/* only as wide as its items, on the left (user, 2026-11-13: "all menus like this shoud be in the left with a width enough
   to cover text / padding not 100% width"); a row wider than the screen still scrolls sideways */
nav:has(> a.tab), [data-seg] { width: fit-content; max-width: 100%; }
[data-seg="sm"] { display: inline-flex; margin-top: 0; padding: 3px; gap: 2px; border-radius: 9px; }
/* the section bar under the site header keeps its place (no 50 px inside the header) */
nav.wrap:has(> a.tab) { margin-top: 8px; margin-bottom: 8px; }
/* ...and starts where the page content starts (.wrap: max 1320 px with 24 px padding), not centred by its auto margins */
nav.wrap:has(> a.tab) { margin-left: max(24px, calc((100% - 1272px) / 2)); margin-right: 0; max-width: min(1272px, calc(100% - 48px)); }

nav > a.tab, [data-seg] > a, [data-seg] > button {
  position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 8px 14px; border: 0; border-radius: 9px; white-space: nowrap; text-decoration: none;
  font-size: 14px; color: var(--color-muted, #8a99a8); background: transparent; transition: color .2s, background-color .2s;
}
[data-seg="sm"] > a, [data-seg="sm"] > button { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; border-radius: 7px; }
nav > a.tab:hover, [data-seg] > a:hover, [data-seg] > button:hover { color: var(--color-ink, #eaf1f8); }
nav > a.tab.tab-on, [data-seg] > [aria-current="page"], [data-seg] > [aria-selected="true"] {
  background: var(--seg-on); color: #fff; box-shadow: 0 6px 20px -8px var(--seg-on);
}
/* with the script the pill does the highlighting (and slides) */
.seg-js > a.tab-on, .seg-js > [aria-current="page"], .seg-js > [aria-selected="true"] { background: transparent; box-shadow: none; color: #fff; }
.seg-ind {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 9px; background: var(--seg-on); pointer-events: none;
  box-shadow: 0 6px 20px -8px var(--seg-on); opacity: 0;
  transition: transform .38s cubic-bezier(.3,.8,.25,1), width .38s cubic-bezier(.3,.8,.25,1), height .38s, opacity .2s;
}
[data-seg="sm"] > .seg-ind { border-radius: 7px; }

/* a panel being fetched (data-seg-swap) and a panel coming in */
.seg-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }
.seg-in { animation: seg-in .32s ease-out; }
@keyframes seg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the YouTuber page's own tab switcher (youtuber.php, its own sliding ink): same purple */
[data-tabs] [data-tab-ink] { background: var(--seg-on) !important; box-shadow: 0 6px 20px -8px var(--seg-on); --tw-ring-color: transparent; }
[data-tabs] [role="tab"][aria-selected="true"] { color: #fff !important; }

/* the member menu (inc/layout.php dashboard_nav, 14 links) as a LEFT SIDE MENU (user, 2026-11-13): wide screens = a sticky
   column beside the page (.dash-shell grid), phones / tablets = one row that scrolls sideways above it. Same purple. */
.dash-shell { display: grid; gap: 20px; }
.dash-side, .dash-main { min-width: 0; }
.dash-main > * + * { margin-top: 20px; }   /* the page's blocks keep main's 20 px rhythm */
.dash-nav {
  display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--color-line, #1e2a37); border-radius: 12px; background: var(--color-surface, #0f161f);
}
.dash-nav::-webkit-scrollbar { display: none; }
.dash-link {
  display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px;
  font-size: 14px; white-space: nowrap; text-decoration: none; color: var(--color-muted, #8a99a8);
  transition: color .2s, background-color .2s;
}
.dash-link svg { flex: none; opacity: .8; }
.dash-link:hover { color: var(--color-ink, #eaf1f8); background: rgba(255, 255, 255, .04); }
.dash-link[aria-current="page"] { background: var(--seg-on); color: #fff; box-shadow: 0 6px 20px -8px var(--seg-on); }
.dash-link[aria-current="page"] svg { opacity: 1; }
.dash-sep { display: none; }
@media (min-width: 1024px) {
  .dash-shell { grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
  .dash-side { position: sticky; top: 72px; }   /* under the 56 px header */
  .dash-nav { flex-direction: column; gap: 2px; padding: 8px; overflow: auto; max-height: calc(100vh - 88px); }
  .dash-link { padding: 9px 12px; }
  .dash-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dash-sep { display: block; height: 1px; margin: 6px 8px; background: var(--color-line, #1e2a37); }
}

/* PHONES / TABLETS: the member area as a mobile app (inc/layout.php dashboard_nav; user, 2026-11-13: "100% mobile
   looking"). The start page (dashboard, .is-hub) = hero + an app list of every section; every other member page = a back
   button, a hero, the page. The side menu, the site search bar, breadcrumbs and the page's own title block step aside. */
.dash-m { display: none; }
@media (max-width: 1023px) {
  .dash-m { display: block; }
  .dash-nav { display: none; }
  .dash-shell { gap: 16px; }
  .dash-shell.is-hub .dash-main { display: none; }
  .dash-main > div > div > h1, .dash-main > div > div > h1 + p { display: none; }   /* the hero carries the title */
  .dash-main .grid > * { min-width: 0; }   /* a one-column grid must not grow to its widest line (Overview: 498 px on a 390 px phone) */
  body:has(.dash-shell) .site-search, body:has(.dash-shell) .site-crumbs, body:has(.dash-shell) .dash-desk-head { display: none; }
}
.dash-mback {
  display: inline-flex; align-items: center; gap: 2px; margin: -6px 0 8px -8px; padding: 6px 12px 6px 4px; border-radius: 10px;
  color: var(--color-accent, #3d9df3); font-size: 16px; font-weight: 600; text-decoration: none;
}
.dash-mback:active { background: rgba(255, 255, 255, .06); }
.dash-mhero {
  display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--color-line, #1e2a37); border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent, #3d9df3) 15%, var(--color-surface, #0f161f)) 0%,
                                      var(--color-surface, #0f161f) 55%, color-mix(in srgb, #9146ff 14%, var(--color-surface, #0f161f)) 100%);
}
.dash-mhero-hub {
  display: block; padding: 18px; border: 0; color: #fff;
  background: linear-gradient(135deg, #2f8fe8 0%, #6a5cf5 55%, #9146ff 100%); box-shadow: 0 18px 40px -22px #9146ffcc;
}
.dash-mstat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .13); color: #fff; text-decoration: none; }
.dash-mstat b { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-mstat span { font-size: 10.5px; line-height: 1.25; color: rgba(255, 255, 255, .78); }
.dash-mbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
}
.dash-mbtn-on { background: #fff; color: #2b2475; }
.dash-mlist { display: grid; gap: 14px; margin-top: 16px; }
.dash-mgroup { overflow: hidden; border: 1px solid var(--color-line, #1e2a37); border-radius: 16px; background: var(--color-surface, #0f161f); }
.dash-mgroup:empty { display: none; }
.dash-mrow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; text-decoration: none; }
.dash-mrow + .dash-mrow::before { content: ''; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--color-line, #1e2a37); }   /* inset divider, as in app lists */
.dash-mrow:active { background: rgba(255, 255, 255, .05); }
.dash-tile { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--t); background: color-mix(in srgb, var(--t) 17%, transparent); }
.dash-tile-lg { width: 50px; height: 50px; border-radius: 14px; }
.dash-tile-lg svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) { .seg-ind { transition: none; } .seg-in { animation: none; } }