/* Match Library foundations, with a distinct in-game location for each workspace. */
.pvp-page-shell {
  /* Match the library's .catalog-card surface without dimming panel content. */
  --pvp-panel-background: color-mix(in srgb, var(--color-canvas-raised) 76%, transparent);
  --pvp-control-background: var(--color-canvas-raised);
  --pvp-control-active: color-mix(in srgb, var(--color-brand) 20%, var(--color-canvas-raised));
  --analytics-active: var(--pvp-control-active);
}
.pvp-page-shell :is(.guild-ladder,.pb-chart-panel,.pb-ledger,.tb-chart-panel,.tb-ledger,.compact-efficiency,.player-category-workspace,.mo-landscape,.mo-results,.mo-secondary > section,.analytics-data-notice,.meta-family-refresh-notice) {
  background: var(--pvp-panel-background);
}
/* Controls need their own solid surface over the translucent panels. */
.pvp-page-shell :is(.pb-category-tabs,.tb-metric-tabs,.pb-damage-filters,.pb-professions,.meta-efficiency-professions,.player-category-professions,.player-category-elites,.mo-professions,.mo-result-modes,.mo-profession-filters,.player-category-score-modes) button,
.pvp-page-shell :is(.compact-category,.player-category-card,.guild-ladder-controls button,.pb-chart-footer button,.tb-small-button,.mo-show-skills,.pb-variants-toggle,.guild-ladder-view-tabs a) {
  background: var(--pvp-control-background);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.pvp-page-shell .meta-analysis-header .meta-view-tabs :is(a,button),
.pvp-page-shell .global-nav .nav-link {
  background: var(--pvp-control-background);
  color: var(--color-text);
}
.pvp-page-shell :is(.pb-category-tabs,.tb-metric-tabs,.pb-damage-filters,.pb-professions,.meta-efficiency-professions,.player-category-professions,.player-category-elites,.mo-professions,.mo-result-modes,.mo-profession-filters,.player-category-score-modes) button[aria-pressed="true"],
.pvp-page-shell :is(.compact-category,.player-category-card).is-active,
.pvp-page-shell .guild-ladder-view-tabs a[aria-current="page"],
.pvp-page-shell .meta-analysis-header .meta-view-tabs :is(a,button).active,
.pvp-page-shell .global-nav .nav-link[aria-current="page"] {
  background: var(--pvp-control-active);
  border-color: var(--color-brand-strong);
  color: var(--color-brand-strong);
}
.pvp-page-shell :is(.pb-category-tabs,.tb-metric-tabs,.pb-damage-filters,.pb-professions,.meta-efficiency-professions,.player-category-professions,.player-category-elites,.mo-professions,.mo-result-modes,.mo-profession-filters,.player-category-score-modes) button:hover,
.pvp-page-shell :is(.compact-category,.player-category-card,.guild-ladder-view-tabs a):hover,
.pvp-page-shell .meta-analysis-header .meta-view-tabs :is(a,button):hover,
.pvp-page-shell .global-nav .nav-link:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-brand-strong);
}
.pvp-page-backdrop {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: clamp(48rem, 56.25vw, 72rem);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.pvp-page-backdrop picture,
.pvp-page-backdrop img { display: block; inline-size: 100%; block-size: 100%; }
.pvp-page-backdrop img { object-fit: cover; object-position: center top; opacity: .7; }
.pvp-page-backdrop[data-pvp-page="guilds"] picture { block-size: calc(100% + 12rem); transform: translateY(-12rem); }
.pvp-page-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,13,14,.78), rgba(10,13,14,.64) 12%, rgba(10,13,14,.16) 27%, rgba(10,13,14,.22) 40%, var(--color-canvas) 100%);
}
.pvp-page-shell .meta-analysis-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.pvp-page-shell .meta-analysis-header-main { border-radius: 5px 5px 0 0; }
.pvp-page-shell .meta-analysis-header-main::after {
  background: linear-gradient(90deg, rgba(10,13,14,.78), rgba(10,13,14,.36) 43%, rgba(10,13,14,.08) 72%, rgba(10,13,14,.56));
}
.pvp-page-shell .meta-analysis-header-controls,
.pvp-page-shell .meta-analysis-header .trends-viewbar {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--pvp-panel-background);
  overflow: hidden;
}
.pvp-page-shell .meta-analysis-header-copy,
.pvp-page-shell .meta-analysis-header-count { text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pvp-page-shell .guild-ladder-page-head {
  min-block-size: 12rem;
  padding: 1.5rem;
  margin-block: 1.25rem .65rem;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(10,13,14,.78), rgba(10,13,14,.36) 43%, rgba(10,13,14,.08) 72%, rgba(10,13,14,.56));
  align-items: end;
}
.pvp-page-shell .guild-ladder-page-head h1 { font-size: clamp(2.25rem,5vw,4rem); line-height: .95; letter-spacing: -.055em; }
.pvp-page-shell .guild-ladder-page-head p { font-size: 14px; margin-top: .5rem; }
.pvp-page-shell .guild-ladder-overview {
  padding: .4rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--pvp-panel-background);
}
@media (max-width: 42rem) {
  .pvp-page-backdrop { block-size: 48rem; }
  .pvp-page-backdrop img { opacity: .6; }
  .pvp-page-backdrop::after { background: linear-gradient(180deg,rgba(10,13,14,.78),rgba(10,13,14,.6) 24%,rgba(10,13,14,.16) 36%,var(--color-canvas) 100%); }
  .pvp-page-backdrop[data-pvp-page="guilds"] picture { block-size: calc(100% + 6rem); transform: translateY(-6rem); }
  .pvp-page-shell .guild-ladder-page-head { min-block-size: 12rem; padding: 1.25rem; gap: 1rem; }
  .pvp-page-shell .guild-ladder-page-head h1 { font-size: 2.25rem; }
  .pvp-page-shell .guild-ladder-page-head p { font-size: 12px; }
}
:root[data-visual-mode="minimal"] .pvp-page-backdrop { display: none; }
:root[data-visual-mode="minimal"] .pvp-page-shell { --pvp-panel-background: var(--color-surface); }
:root[data-visual-mode="minimal"] .pvp-page-shell .guild-ladder-page-head { min-block-size: auto; padding: 0; background: none; }
:root[data-visual-mode="minimal"] .pvp-page-shell .meta-analysis-header-main::after { display: none; }