/*
 * CrimeTop50 Dashboard UX V2 (only loaded with UI_V2026_DASH_UX on). Uses the V2026 tokens from v2026.css, so light and
 * dark follow by themselves: no colour values of its own.
 */

/* ===================== member pages: width ===================== */
.v26.v26-ux-wide { --v26-wrap: 90rem; }   /* 1440 px, header and footer line up with the content */
.v26-ux .v26-dash { grid-template-columns: 14.5rem minmax(0, 1fr); padding-block-end: var(--v26-s6); }
.v26-ux .v26-footer { margin-top: var(--v26-s6); }

/* ===================== member menu ===================== */
.v26-ux .ux-nav-bar { display: none; }
.v26-ux .ux-backdrop { position: fixed; inset: 0; z-index: 55; background: var(--v26-ink); opacity: .45; }
.v26-ux .ux-backdrop[hidden] { display: none; }
.v26-ux .ux-side { display: grid; gap: var(--v26-s3); min-width: 0; padding: var(--v26-s3); background: var(--v26-surface); border: 1px solid var(--v26-line); border-radius: var(--v26-r); box-shadow: var(--v26-shadow); }
.v26-ux .ux-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--v26-s2); padding-bottom: var(--v26-s3); border-bottom: 1px solid var(--v26-line); }
.v26-ux .ux-nav-closebtn { display: none; }
.v26-ux .ux-who { margin: 0; display: flex; align-items: center; gap: .625rem; min-width: 0; }
.v26-ux .ux-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--v26-accent-soft); color: var(--v26-accent-text); font: 800 .9375rem/1 var(--v26-font-display); }
.v26-ux .ux-who-text { display: grid; gap: .0625rem; min-width: 0; }
.v26-ux .ux-who-text b { font: 700 1rem/1.25 var(--v26-font-display); overflow-wrap: anywhere; }
.v26-ux .ux-who-text small { font-size: var(--v26-text-sm); color: var(--v26-muted); }
.v26-ux .ux-nav { display: grid; gap: var(--v26-s2); }
.v26-ux .ux-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
.v26-ux .ux-nav-group { margin: var(--v26-s2) 0 0; padding-inline: .75rem; font: 700 var(--v26-text-xs)/1.2 var(--v26-font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--v26-muted); }
.v26-ux .ux-nav-group:first-child { margin-top: 0; }
.v26-ux .ux-nav-link { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: var(--v26-tap); padding-inline: .75rem; border-radius: var(--v26-r-sm); color: var(--v26-muted); font: 600 .9375rem/1.25 var(--v26-font-body); text-decoration: none; }
.v26-ux .ux-nav-link span { min-width: 0; overflow-wrap: anywhere; }
.v26-ux .ux-nav-link svg, .v26-ux .ux-nav-logout > svg, .v26-ux .ux-nav-open svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; }
.v26-ux .ux-nav-link:hover { color: var(--v26-ink); background: var(--v26-surface-2); }
.v26-ux .ux-nav-link[aria-current="page"] { color: var(--v26-accent-text); background: var(--v26-accent-soft); box-shadow: inset .1875rem 0 0 var(--v26-accent); }
.v26-ux .ux-nav-logout { position: relative; color: var(--v26-muted); }
.v26-ux .ux-nav-logout > svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.v26-ux .ux-nav-logout:hover { color: var(--v26-ink); }
.v26-ux .ux-nav-logout .ux-nav-link { padding-inline-start: 2.5rem; color: inherit; }

@media (min-width: 62.5625em) {
  .v26-ux .ux-side { position: sticky; top: var(--v26-s4); }
}
@media (max-width: 62.5em) { /* 1000 px */
  .v26-ux .v26-dash { grid-template-columns: minmax(0, 1fr); }
  .v26-ux-js.v26-ux .ux-nav-bar { display: flex; }
  .v26-ux-js.v26-ux .ux-nav-closebtn { display: inline-grid; }
  .v26-ux .ux-nav-open { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--v26-tap); max-width: 100%; }
  .v26-ux-js.v26-ux .ux-side {
    position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(19rem, 86vw); align-content: start; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 0; border-width: 0 1px 0 0; padding-left: max(var(--v26-s3), env(safe-area-inset-left, 0px));
    padding-top: max(var(--v26-s3), env(safe-area-inset-top, 0px)); padding-bottom: max(var(--v26-s3), env(safe-area-inset-bottom, 0px));
    transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  }
  .v26-ux-js.v26-ux .ux-side[data-open] { transform: none; visibility: visible; transition: transform .2s ease; }
  html.ux-nav-locked, html.ux-nav-locked body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .v26-ux-js.v26-ux .ux-side, .v26-ux-js.v26-ux .ux-side[data-open] { transition: none; }
}

/* ===================== wizard and edit form: two columns on wide screens, never overly wide ===================== */
.v26-ux .v26-step legend { margin-bottom: var(--v26-s3); }
.v26-ux .v26-steps li > span { min-width: 0; }
.v26-ux-wide .ux-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v26-s4); align-items: start; }
.v26-ux .ux-grid > form { min-width: 0; max-width: none; }
.v26-ux .v26-dash-form.v26-card { display: grid; gap: var(--v26-s4); }
.v26-ux .ux-summary-account > div { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); }
@media (min-width: 73.75em) { /* 1180 px */
  .v26-ux-wide .ux-grid { grid-template-columns: minmax(0, 46rem) minmax(20rem, 1fr); }
  .v26-ux .ux-preview { position: sticky; top: var(--v26-s4); }
}
.v26-ux .ux-preview { display: grid; gap: var(--v26-s3); min-width: 0; }
.v26-ux .ux-preview h2 { margin: 0; font-size: 1rem; }
.v26-ux .ux-preview-banner { max-width: 29.25rem; min-width: 0; }
.v26-ux .ux-preview-banner [hidden] { display: none; }
.v26-ux .ux-preview-status { margin: 0; min-height: 1.25em; }
.v26-ux .ux-preview-status:empty { display: none; }
.v26-ux .ux-preview-game { display: grid; gap: .25rem; padding: var(--v26-s3); border: 1px solid var(--v26-line); border-radius: var(--v26-r-sm); min-width: 0; }
.v26-ux .ux-preview-game b { font: 700 1.0625rem/1.25 var(--v26-font-display); overflow-wrap: anywhere; }
.v26-ux .ux-preview-game p { margin: 0; font-size: var(--v26-text-sm); color: var(--v26-muted); overflow-wrap: anywhere; }
.v26-ux .ux-preview-badge { margin: 0; }

/* ===================== game cards: one game gets the full width, more games a list or two columns ===================== */
.v26-ux .v26-dash-game.ux-game { display: block; padding: var(--v26-s4); container-type: inline-size; }
.v26-ux .ux-game:has(details[open]) { position: relative; z-index: 20; }   /* the open menu stays above the next card */
.v26-ux .ux-game-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v26-s3) var(--v26-s5); align-items: start; }
.v26-ux .ux-game-media { display: grid; gap: var(--v26-s3); min-width: 0; }
.v26-ux .ux-game-media .v26-banner { max-width: 29.25rem; }
.v26-ux .ux-game-body { display: grid; gap: .5rem; min-width: 0; }
.v26-ux .ux-game-body .v26-game-badges { margin: 0; }
.v26-ux .ux-game-kpis { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v26-s2); max-width: 29.25rem; }
.v26-ux .ux-game-kpis div { display: grid; gap: .125rem; align-content: space-between; padding: .5rem .625rem; border-radius: var(--v26-r-sm); background: var(--v26-surface-2); min-width: 0; }
.v26-ux .ux-game-kpis dt { font-size: var(--v26-text-xs); line-height: 1.25; color: var(--v26-muted); overflow-wrap: anywhere; }
.v26-ux .ux-game-kpis dd { margin: 0; font: 800 1.25rem/1.15 var(--v26-font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v26-ux .ux-game-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v26-s2); margin-top: .25rem; }
.v26-ux .ux-game-acts .v26-btn { min-height: var(--v26-tap); }
.v26-ux .ux-more { position: relative; }
.v26-ux .ux-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.v26-ux .ux-more summary::-webkit-details-marker { display: none; }
.v26-ux .ux-more summary svg { width: 1rem; height: 1rem; }
.v26-ux .ux-more[open] summary svg { transform: rotate(180deg); }
.v26-ux .ux-more-menu { position: absolute; left: 0; top: calc(100% + .25rem); z-index: 30; list-style: none; margin: 0; padding: .25rem; min-width: 12rem; background: var(--v26-surface); border: 1px solid var(--v26-line); border-radius: var(--v26-r-sm); box-shadow: var(--v26-shadow); }
.v26-ux .ux-more-menu a { display: flex; align-items: center; min-height: var(--v26-tap); padding-inline: .75rem; border-radius: var(--v26-r-sm); color: var(--v26-ink); font-weight: 600; text-decoration: none; }
.v26-ux .ux-more-menu a:hover { background: var(--v26-surface-2); }
@container (min-width: 44rem) {
  .v26-ux .ux-game-in { grid-template-columns: minmax(0, 29.25rem) minmax(0, 1fr); }
}
@container (max-width: 30rem) {   /* narrow card: the menu takes the width of the card, so it can never leave the screen */
  .v26-ux .ux-game-acts { position: relative; }
  .v26-ux .ux-more { position: static; }
  .v26-ux .ux-more-menu { right: 0; min-width: 0; }
}
@media (min-width: 90em) { /* 1440 px: two columns from two games on, with the banner on top */
  .v26-ux .v26-dash-games:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ===================== account and game detail: use the width, without overly long lines ===================== */
.v26-ux .v26-dash-form.v26-dash-account { max-width: 64rem; }
@media (min-width: 73.75em) {
  .v26-ux .v26-dash-account { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .v26-ux .v26-dash-account > section:last-child { grid-column: 1 / -1; }
  .v26-ux .v26-dash-main:has(> .v26-dash-prem) { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; }
  .v26-ux .v26-dash-main:has(> .v26-dash-prem) > * { grid-column: 1 / -1; }
  .v26-ux .v26-dash-main:has(> .v26-dash-prem) > .v26-dash-detail, .v26-ux .v26-dash-main:has(> .v26-dash-prem) > .v26-dash-promo { grid-column: 1; }
  .v26-ux .v26-dash-main:has(> .v26-dash-prem) > .v26-dash-prem { grid-column: 2; grid-row: span 2; }
}

.v26-ux .v26-dash-head > .v26-row { flex: 0 0 auto; }
.v26-ux .v26-dash-copy .v26-btn { align-self: flex-start; }   /* not stretched to the height of the code field */
.v26-ux .v26-step-acts > span:empty { display: none; }        /* no offset before the only button of step 1 on a phone */
.v26-ux .v26-step-acts:has(> button:only-of-type) { justify-content: flex-end; }

/* ===================== header on member pages ===================== */
.v26-ux-wide .v26-header-actions > .v26-btn-primary { display: none; }   /* the page and the member menu carry this action */