/* OnlyShows v50 — localized industrial prism themes and refresh-safe mobile polish */

/* Make the editable avatar discoverable without turning it into a loud control. */
.profile-avatar-button > .profile-avatar-edit-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: .96;
  transform: none;
  color: #fff;
  background: rgb(24 24 24 / .76);
}

.profile-avatar-edit-cue .material-symbols-rounded {
  font-size: 14px;
  line-height: 1;
}

/* Light industrial theme: warm fog, neutral UI and localized refraction. */
html[data-background="prism-mono"] {
  --md-sys-color-background: #e8e6df;
  --md-sys-color-on-background: #20211f;
  --md-sys-color-surface: #e8e6df;
  --md-sys-color-on-surface: #20211f;
  --md-sys-color-surface-container-lowest: #fbf9f3;
  --md-sys-color-surface-container-low: #f4f1eb;
  --md-sys-color-surface-container: #ece9e3;
  --md-sys-color-surface-container-high: #e3e1dc;
  --md-sys-color-surface-container-highest: #d8d7d2;
  --md-sys-color-on-surface-variant: #5d5d59;
  --md-sys-color-outline: #7d7d78;
  --md-sys-color-outline-variant: #c9c8c2;
  --background: #e8e6df;
  --on-background: #20211f;
  --surface: #e8e6df;
  --on-surface: #20211f;
  --surface-container-lowest: #fbf9f3;
  --surface-container-low: #f4f1eb;
  --surface-container: #ece9e3;
  --surface-container-high: #e3e1dc;
  --surface-container-highest: #d8d7d2;
  --on-surface-variant: #5d5d59;
  --outline: #7d7d78;
  --outline-variant: #c9c8c2;
}

/* Dark industrial theme: graphite UI with restrained local colour fields. */
html[data-background="prism-violet"] {
  --md-sys-color-background: #111212;
  --md-sys-color-on-background: #f3efe8;
  --md-sys-color-surface: #111212;
  --md-sys-color-on-surface: #f3efe8;
  --md-sys-color-surface-container-lowest: #171718;
  --md-sys-color-surface-container-low: #1c1c1e;
  --md-sys-color-surface-container: #222225;
  --md-sys-color-surface-container-high: #29292c;
  --md-sys-color-surface-container-highest: #333338;
  --md-sys-color-on-surface-variant: #c7c3bc;
  --md-sys-color-outline: #918d88;
  --md-sys-color-outline-variant: #454549;
  --background: #111212;
  --on-background: #f3efe8;
  --surface: #111212;
  --on-surface: #f3efe8;
  --surface-container-lowest: #171718;
  --surface-container-low: #1c1c1e;
  --surface-container: #222225;
  --surface-container-high: #29292c;
  --surface-container-highest: #333338;
  --on-surface-variant: #c7c3bc;
  --outline: #918d88;
  --outline-variant: #454549;
}

html[data-background="prism-mono"] body {
  background:
    radial-gradient(ellipse 33% 26% at 79% 13%, rgb(179 174 204 / .38), transparent 74%),
    radial-gradient(ellipse 31% 29% at 8% 73%, rgb(151 182 167 / .26), transparent 72%),
    linear-gradient(116deg, transparent 0 49%, rgb(117 123 126 / .18) 49% 72%, transparent 72%),
    linear-gradient(180deg, #efede7, #dedcd5) !important;
}

html[data-background="prism-violet"] body {
  background:
    radial-gradient(ellipse 39% 31% at 77% 13%, rgb(104 77 145 / .35), transparent 72%),
    radial-gradient(ellipse 35% 33% at 7% 73%, rgb(29 101 89 / .26), transparent 72%),
    radial-gradient(ellipse 28% 25% at 65% 96%, rgb(121 64 52 / .19), transparent 72%),
    linear-gradient(116deg, transparent 0 50%, rgb(72 76 81 / .25) 50% 74%, transparent 74%),
    linear-gradient(180deg, #171718, #0d0e0f) !important;
}

/* Two large, cropped material forms replace the old full-screen stripe layer. */
html[data-background="prism-mono"] body::before,
html[data-background="prism-violet"] body::before,
html[data-background="prism-mono"] body::after,
html[data-background="prism-violet"] body::after {
  content: "" !important;
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-background="prism-mono"] body::before,
html[data-background="prism-violet"] body::before {
  inset: auto !important;
  top: -10vh;
  right: -10vw;
  width: min(58vw, 900px);
  height: 76vh;
  border-radius: 42% 0 38% 56%;
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(135deg, #000 18%, rgb(0 0 0 / .88) 64%, transparent 96%);
  mask-image: linear-gradient(135deg, #000 18%, rgb(0 0 0 / .88) 64%, transparent 96%);
}

html[data-background="prism-mono"] body::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgb(74 80 82 / .12) 19px 21px, transparent 22px 35px),
    linear-gradient(135deg, rgb(255 255 255 / .72), rgb(146 150 155 / .28) 45%, rgb(175 166 199 / .26) 70%, transparent);
  box-shadow: inset 28px 0 70px rgb(255 255 255 / .34), inset -22px 0 60px rgb(84 90 93 / .14);
}

html[data-background="prism-violet"] body::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgb(174 180 190 / .16) 21px 23px, transparent 24px 38px),
    linear-gradient(135deg, rgb(72 76 81 / .42), rgb(65 48 83 / .42) 46%, rgb(27 74 67 / .30) 72%, transparent);
  box-shadow: inset 30px 0 72px rgb(151 159 168 / .08), inset -24px 0 64px rgb(0 0 0 / .30);
}

html[data-background="prism-mono"] body::after,
html[data-background="prism-violet"] body::after {
  inset: auto !important;
  left: -20vw;
  bottom: -32vh;
  width: min(72vw, 1100px);
  height: 68vh;
  border-radius: 50%;
  transform: rotate(12deg);
}

html[data-background="prism-mono"] body::after {
  background: radial-gradient(ellipse at 58% 38%, rgb(198 204 204 / .55) 0 18%, rgb(158 166 168 / .22) 38%, transparent 68%);
  box-shadow: inset -42px 36px 80px rgb(148 156 157 / .18);
}

html[data-background="prism-violet"] body::after {
  background: radial-gradient(ellipse at 58% 38%, rgb(45 67 74 / .44) 0 17%, rgb(59 43 75 / .30) 39%, transparent 69%);
  box-shadow: inset -42px 36px 84px rgb(103 61 52 / .14);
}

/* Keep application surfaces neutral; the background supplies the personality. */
html[data-background="prism-violet"] :is(
  .site-header,
  .show-card,
  .search-shell,
  .search-box,
  .mobile-bottom-nav,
  .stat-card,
  .profile-stat,
  .profile-record-card
) {
  background-color: var(--md-sys-color-surface-container-lowest) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
  color: var(--md-sys-color-on-surface);
}

html[data-background="prism-mono"] :is(.show-card, .stat-card, .profile-stat, .profile-record-card) {
  background-color: var(--md-sys-color-surface-container-lowest) !important;
  border-color: var(--md-sys-color-outline-variant) !important;
}

.background-preview-mono {
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgb(84 90 92 / .17) 8px 9px, transparent 10px 15px),
    radial-gradient(circle at 75% 22%, #d4cfe1, transparent 38%),
    linear-gradient(135deg, #f1efe9, #c7cbc8);
}

.background-preview-violet {
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgb(179 185 194 / .18) 8px 9px, transparent 10px 15px),
    radial-gradient(circle at 75% 22%, #51416a, transparent 40%),
    linear-gradient(135deg, #27292b, #101112 70%);
}

@media (max-width: 720px) {
  .profile-avatar-button > .profile-avatar-edit-cue {
    font-size: 11px;
  }

  html[data-background="prism-mono"] body {
    background:
      radial-gradient(ellipse 58% 25% at 78% 16%, rgb(175 167 205 / .46), transparent 72%),
      radial-gradient(ellipse 61% 27% at 7% 42%, rgb(145 183 165 / .32), transparent 74%),
      linear-gradient(118deg, transparent 0 42%, rgb(113 120 123 / .20) 42% 71%, transparent 71%),
      linear-gradient(180deg, #efede7, #dcdad3) !important;
  }

  html[data-background="prism-violet"] body {
    background:
      radial-gradient(ellipse 62% 28% at 77% 15%, rgb(108 76 151 / .46), transparent 72%),
      radial-gradient(ellipse 65% 30% at 5% 44%, rgb(24 107 91 / .34), transparent 73%),
      linear-gradient(118deg, transparent 0 43%, rgb(80 83 90 / .29) 43% 72%, transparent 72%),
      linear-gradient(180deg, #18191a, #0c0d0e) !important;
  }

  html[data-background="prism-mono"] body::before,
  html[data-background="prism-violet"] body::before {
    top: 76px;
    right: -44vw;
    width: 118vw;
    height: 540px;
    opacity: .98;
  }

  html[data-background="prism-mono"] body::after,
  html[data-background="prism-violet"] body::after {
    left: -50vw;
    top: 430px;
    bottom: auto;
    width: 115vw;
    height: 520px;
    opacity: .92;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-background="prism-mono"] body::before,
  html[data-background="prism-violet"] body::before,
  html[data-background="prism-mono"] body::after,
  html[data-background="prism-violet"] body::after {
    transform: none;
  }
}