/* OnlyShows 0.10.3 — unified canvas themes and clearer fluted glass. */

/* A background is now a complete theme.  It owns the tonal surfaces as well as
   the canvas, so a light wallpaper can never inherit dark cards or text. */
html[data-background="plain"] {
  color-scheme: light;
  --md-sys-color-background: #f8f5ee;
  --md-sys-color-on-background: #24211d;
  --md-sys-color-surface: #f8f5ee;
  --md-sys-color-on-surface: #24211d;
  --md-sys-color-surface-container-lowest: #fffdf8;
  --md-sys-color-surface-container-low: #f4f0e8;
  --md-sys-color-surface-container: #eeeae2;
  --md-sys-color-surface-container-high: #e8e3da;
  --md-sys-color-surface-container-highest: #e1dcd3;
  --md-sys-color-on-surface-variant: #615b54;
  --md-sys-color-outline: #8b837a;
  --md-sys-color-outline-variant: #d2cbc1;
}

html[data-background="prism-mono"] {
  color-scheme: light;
  --md-sys-color-background: #f2f1ec;
  --md-sys-color-on-background: #1d1d1b;
  --md-sys-color-surface: #f2f1ec;
  --md-sys-color-on-surface: #1d1d1b;
  --md-sys-color-surface-container-lowest: #fbfaf6;
  --md-sys-color-surface-container-low: #f0eee8;
  --md-sys-color-surface-container: #e9e7e1;
  --md-sys-color-surface-container-high: #e2dfd8;
  --md-sys-color-surface-container-highest: #dad7cf;
  --md-sys-color-on-surface-variant: #5e5b55;
  --md-sys-color-outline: #858079;
  --md-sys-color-outline-variant: #cec9c0;
}

html[data-background="prism-violet"] {
  color-scheme: light;
  --md-sys-color-background: #f3f0f4;
  --md-sys-color-on-background: #1b181d;
  --md-sys-color-surface: #f3f0f4;
  --md-sys-color-on-surface: #1b181d;
  --md-sys-color-surface-container-lowest: #fbf9fb;
  --md-sys-color-surface-container-low: #f1edf2;
  --md-sys-color-surface-container: #ebe6ec;
  --md-sys-color-surface-container-high: #e4dfe6;
  --md-sys-color-surface-container-highest: #dcd6de;
  --md-sys-color-on-surface-variant: #5b545e;
  --md-sys-color-outline: #847b87;
  --md-sys-color-outline-variant: #d0c7d2;
}

html[data-background="night-blue"] {
  color-scheme: dark;
  --md-sys-color-background: #101720;
  --md-sys-color-on-background: #edf2f7;
  --md-sys-color-surface: #101720;
  --md-sys-color-on-surface: #edf2f7;
  --md-sys-color-surface-container-lowest: #131c27;
  --md-sys-color-surface-container-low: #17212c;
  --md-sys-color-surface-container: #1c2733;
  --md-sys-color-surface-container-high: #23303d;
  --md-sys-color-surface-container-highest: #2a3846;
  --md-sys-color-on-surface-variant: #bec8d3;
  --md-sys-color-outline: #8e9aa7;
  --md-sys-color-outline-variant: #394653;
}

html[data-background] {
  --surface: var(--md-sys-color-surface);
  --on-surface: var(--md-sys-color-on-surface);
  --surface-container-lowest: var(--md-sys-color-surface-container-lowest);
  --surface-container-low: var(--md-sys-color-surface-container-low);
  --surface-container: var(--md-sys-color-surface-container);
  --surface-container-high: var(--md-sys-color-surface-container-high);
  --surface-container-highest: var(--md-sys-color-surface-container-highest);
  --on-surface-variant: var(--md-sys-color-on-surface-variant);
  --outline: var(--md-sys-color-outline);
  --outline-variant: var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-background);
}

html[data-background] body {
  color: var(--on-surface);
}

html[data-background="plain"] body {
  background: #f8f5ee !important;
}

html[data-background="night-blue"] body {
  background:
    radial-gradient(circle at 82% 12%, rgb(75 105 137 / 16%), transparent 32%),
    #101720 !important;
}

html[data-background] .hero-title,
html[data-background] .hero h1,
html[data-background] #heroTitle {
  color: var(--on-surface) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-background] .topbar,
html[data-background] .mobile-bottom-nav {
  color: var(--on-surface);
}

html[data-background] .show-card {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--surface-container-lowest) 96%, transparent);
  border-color: var(--outline-variant);
}

html[data-background] dialog,
html[data-background] .personalize-dialog {
  color: var(--on-surface);
  background: var(--surface-container-high);
}

/* The two prism canvases mimic fluted glass: a restrained illustration sits
   behind alternating highlight, lens and shadow bands.  The rib layer is
   deliberately crisp, while the artwork remains away from the card grid. */
html[data-background="prism-mono"] body,
html[data-background="prism-violet"] body {
  position: relative;
  isolation: isolate;
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html[data-background="prism-mono"] body {
  background-color: #f2f1ec !important;
  background-image:
    conic-gradient(from 216deg at 5% 57%, transparent 0 10%, rgb(13 13 13 / 78%) 10% 17%, transparent 17% 100%),
    radial-gradient(ellipse 25% 48% at -4% 57%, rgb(8 8 8 / 82%) 0 37%, transparent 38%),
    conic-gradient(from 32deg at 96% 28%, transparent 0 9%, rgb(24 24 23 / 16%) 10% 17%, transparent 19% 100%),
    linear-gradient(115deg, #f7f6f1, #e9e8e3) !important;
}

html[data-background="prism-violet"] body {
  background-color: #f3f0f4 !important;
  background-image:
    radial-gradient(ellipse 13% 25% at 78% 25%, rgb(99 43 151 / 54%) 0 56%, transparent 58%),
    radial-gradient(ellipse 18% 14% at 88% 37%, rgb(120 63 177 / 50%) 0 57%, transparent 59%),
    radial-gradient(ellipse 18% 14% at 68% 38%, rgb(78 28 129 / 48%) 0 57%, transparent 59%),
    radial-gradient(circle at 78% 36%, rgb(33 17 47 / 66%) 0 5%, transparent 9%),
    linear-gradient(90deg, transparent 77%, rgb(48 80 48 / 42%) 77.4% 78.1%, transparent 78.5%),
    radial-gradient(ellipse 18% 25% at 4% 78%, rgb(97 55 139 / 14%) 0 45%, transparent 47%),
    linear-gradient(120deg, #faf9f7, #ebe8ed) !important;
}

html[data-background="prism-mono"] body::before,
html[data-background="prism-violet"] body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / 62%) 0 1px,
      rgb(255 255 255 / 22%) 1px 7px,
      rgb(29 28 27 / 12%) 7px 8px,
      rgb(255 255 255 / 52%) 8px 10px,
      rgb(255 255 255 / 8%) 10px 17px,
      rgb(28 27 26 / 10%) 17px 18px);
  background-size: 18px 100%;
  box-shadow:
    inset 0 0 90px rgb(255 255 255 / 24%),
    inset 0 0 0 1px rgb(255 255 255 / 26%);
  backdrop-filter: blur(1.2px) contrast(1.08) saturate(.92);
}

html[data-background="prism-violet"] body::before {
  background:
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / 66%) 0 1px,
      rgb(255 255 255 / 20%) 1px 7px,
      rgb(67 37 93 / 14%) 7px 8px,
      rgb(255 255 255 / 54%) 8px 10px,
      rgb(255 255 255 / 8%) 10px 17px,
      rgb(55 31 78 / 11%) 17px 18px);
  background-size: 18px 100%;
}

html[data-background="prism-mono"] body > *,
html[data-background="prism-violet"] body > * {
  position: relative;
  z-index: 1;
}

html[data-background^="prism"] .topbar,
html[data-background^="prism"] .mobile-bottom-nav {
  background: color-mix(in srgb, var(--surface-container-high) 88%, transparent);
  backdrop-filter: blur(14px) saturate(.9);
}

html[data-background^="prism"] .show-card,
html[data-background^="prism"] .stats > * {
  backdrop-filter: blur(10px) saturate(.9);
}

/* Preview tiles use the same crisp 18px rhythm at a reduced scale. */
.background-preview-mono {
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 68%) 0 1px, transparent 1px 6px, rgb(20 20 20 / 20%) 6px 7px, rgb(255 255 255 / 55%) 7px 9px, transparent 9px 14px),
    conic-gradient(from 216deg at 8% 60%, transparent 0 10%, #151515 10% 22%, transparent 22%),
    #efeee9 !important;
}

.background-preview-violet {
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 68%) 0 1px, transparent 1px 6px, rgb(78 38 110 / 22%) 6px 7px, rgb(255 255 255 / 55%) 7px 9px, transparent 9px 14px),
    radial-gradient(ellipse at 55% 42%, #672d99 0 20%, #a078c5 38%, transparent 61%),
    #efedf0 !important;
}

/* The sheet itself owns the scroll.  Its header stays visible while all theme,
   colour and marker controls remain reachable on desktop and mobile. */
.personalize-dialog {
  max-height: min(860px, calc(100dvh - 32px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--outline-variant) transparent;
  -webkit-overflow-scrolling: touch;
}

.personalize-dialog::-webkit-scrollbar {
  width: 6px;
}

.personalize-dialog::-webkit-scrollbar-track {
  background: transparent;
}

.personalize-dialog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--outline-variant);
}

.personalize-dialog .personalize-head {
  position: sticky;
  z-index: 5;
  top: 0;
  background: color-mix(in srgb, var(--surface-container-high) 90%, transparent);
  backdrop-filter: blur(14px);
}

@media (max-width: 719px) {
  .personalize-dialog {
    height: 92dvh !important;
    max-height: 92dvh !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .background-options {
    grid-template-columns: 1fr;
  }

  html[data-background="prism-mono"] body::before,
  html[data-background="prism-violet"] body::before {
    background-size: 14px 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-background^="prism"] .topbar,
  html[data-background^="prism"] .mobile-bottom-nav,
  html[data-background^="prism"] .show-card,
  html[data-background^="prism"] .stats > * {
    backdrop-filter: none;
  }
}