/* Artwork selection only. Forum component palettes are owned by their original stylesheets. */
html[data-vice-background="vice"]{--va-image:url("../images/vice/v4/w14.webp");--va-mobile:url("../images/vice/v4/w14-mobile.webp")}
html[data-vice-background="idlewood"]{--va-image:url("../images/vice/v4/w06.webp");--va-mobile:url("../images/vice/v4/w06-mobile.webp")}
html[data-vice-background="vice-beach"]{--va-image:url("../images/vice/v4/w17.webp");--va-mobile:url("../images/vice/v4/w17-mobile.webp")}
html[data-vice-background="commerce"]{--va-image:url("../images/vice/v4/w15.webp");--va-mobile:url("../images/vice/v4/w15-mobile.webp")}
html[data-vice-background="mulholland"]{--va-image:url("../images/vice/v4/w19.webp");--va-mobile:url("../images/vice/v4/w19-mobile.webp")}
html[data-vice-background="downtown"]{--va-image:url("../images/vice/v4/w24.webp");--va-mobile:url("../images/vice/v4/w24-mobile.webp")}

/* Fixed picker colors follow light/dark mode, never the selected artwork. */
html:root{--va-page:#eef2f7;--va-page-rgb:238,242,247;--va-paper:#fff;--va-soft:#f3f6fa;--va-line:#d9e1ea;--va-ink:#17212b;--va-copy:#435165;--va-muted:#607086;--va-accent:#b72769;--va-accent-rgb:183,39,105;--va-link:#186eaa;--va-scene:var(--va-image)}
html:root[data-vice-mode="dark"]{--va-page:#0c1017;--va-page-rgb:12,16,23;--va-paper:#141a22;--va-soft:#10161e;--va-line:#2a3442;--va-ink:#f1f4f8;--va-copy:#c1cbd7;--va-muted:#95a3b5;--va-accent:#fa91bd;--va-accent-rgb:250,145,189;--va-link:#83c4ff;--va-scene:var(--va-image)}

/* Almost-solid neutral page canvas: the image is only a faint texture. */
html:root[data-vice-background][data-vice-mode] body.vice-white-2026{position:relative;isolation:isolate;background:var(--va-page)!important}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026::before{
 content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(180deg,rgba(var(--va-page-rgb),.92),rgba(var(--va-page-rgb),.97) 65%,var(--va-page)),var(--va-scene)!important;
 background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;
}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 #content_section,
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 #main_content_section,
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 #wrapper{background:transparent!important}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 #wrapper::before{display:none!important}

/* Only header artwork changes; category art and component colors stay native. */
html:root[data-vice-background] body.vice-white-2026 .vc-city-art{background-image:var(--va-scene)!important;background-position:center 52%!important;background-size:cover!important}
html:root[data-vice-background] body.vice-white-2026 .vc-city-art img{opacity:0!important}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 #header.vi-mast{
 background-image:linear-gradient(90deg,#080c11f2,#080c114d 65%,#080c1199),var(--va-scene)!important;
 background-position:center!important;background-size:cover!important;
}
html:root[data-vice-background] body.vice-white-2026 .vi-mast__art{opacity:0!important}
html:root[data-vice-background] body.vice-white-2026 #main_content_section .vsn:not(.vsn-home-preview) .vsn-mast{background-image:linear-gradient(90deg,#0b1422 15%,#0b1422d4 45%,#0b14223d),var(--va-scene)!important}
html:root[data-vice-background][data-vice-mode="dark"] body.vice-white-2026 #main_content_section .vsn:not(.vsn-home-preview) .vsn-mast{background-image:linear-gradient(90deg,#080b10 15%,#080b10e8 45%,#080b1080),var(--va-scene)!important}

.vc-background-picker {
	position: relative;
	display: flex;
	align-items: center;
	z-index: 360;
}
/* Lift the masthead stacking context while the panel overlaps page content. */
body.vice-home-layout.vice-background-picker-open .vc-home-masthead,
body.vice-inner-shell.vice-background-picker-open .vc-home-masthead {
	z-index: 420;
}

body.vice-home-layout.vice-background-picker-open .vc-home-navbar,
body.vice-inner-shell.vice-background-picker-open .vc-home-navbar,
body.vice-home-layout.vice-background-picker-open .vc-nav-utilities,
body.vice-inner-shell.vice-background-picker-open .vc-nav-utilities {
	overflow: visible;
}

body.vice-home-layout .vc-home-navbar .vc-background-picker-toggle,
body.vice-inner-shell .vc-home-navbar .vc-background-picker-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: rgba(5, 7, 12, 0.58);
	color: var(--va-copy);
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.vice-home-layout .vc-home-navbar .vc-background-picker-toggle:hover,
body.vice-inner-shell .vc-home-navbar .vc-background-picker-toggle:hover,
body.vice-home-layout .vc-home-navbar .vc-background-picker-toggle:focus-visible,
body.vice-inner-shell .vc-home-navbar .vc-background-picker-toggle:focus-visible,
.vc-background-picker.is-open .vc-background-picker-toggle {
	border-color: var(--va-line);
	background: var(--va-soft);
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}

.vc-background-picker-toggle .vc-nav-utility-surface {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.vc-background-picker-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	box-sizing: border-box;
	width: min(390px, calc(100vw - 28px));
	padding: 14px;
	border: 1px solid var(--va-line);
	border-radius: 16px;
	background: rgba(var(--va-page-rgb), 0.97);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.vc-background-picker-panel[hidden] {
	display: none !important;
}

.vc-background-picker-panel::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 14px;
	width: 12px;
	height: 12px;
	border-top: 1px solid var(--va-line);
	border-left: 1px solid var(--va-line);
	background: rgba(var(--va-page-rgb), 0.97);
	transform: rotate(45deg);
}

.vc-background-picker-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin: 0 2px 12px;
}

.vc-background-picker-kicker {
	display: block;
	margin-bottom: 3px;
	color: var(--va-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vc-background-picker-title {
	margin: 0;
	color: var(--va-ink);
	font-size: 15px;
	font-weight: 800;
}

.vc-background-picker-note {
	margin: 4px 0 0;
	color: var(--va-muted);
	font-size: 11px;
	line-height: 1.45;
}

.vc-background-picker-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

.vc-background-option {
	position: relative;
	display: grid;
	grid-template-rows: 76px auto;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--va-line);
	border-radius: 12px;
	background: var(--va-paper);
	color: var(--va-copy);
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.vc-background-option:hover,
.vc-background-option:focus-visible {
	border-color: var(--va-line);
	background: var(--va-soft);
	transform: translateY(-1px);
	outline: none;
}

.vc-background-option[aria-checked="true"] {
	border-color: var(--va-accent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--va-accent) 45%, transparent);
}

.vc-background-option-preview {
	position: relative;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.vc-background-option-preview::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(3, 5, 9, 0.66) 100%);
}


.vc-background-option-copy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 42px;
	padding: 8px 10px;
}

.vc-background-option-name {
	display: block;
	overflow: hidden;
	color: var(--va-ink);
	font-size: 12px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vc-background-option-tone {
	display: block;
	margin-top: 1px;
	color: var(--va-muted);
	font-size: 9px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vc-background-option-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	border-radius: 50%;
	background: var(--va-accent);
	color: #071017;
	font-size: 10px;
	opacity: 0;
	transform: scale(0.72);
	transition: opacity 150ms ease, transform 150ms ease;
}

.vc-background-option[aria-checked="true"] .vc-background-option-check {
	opacity: 1;
	transform: scale(1);
}

@media (max-width: 760px) {
	.vc-background-picker-panel {
		position: fixed;
		top: 72px;
		right: 14px;
		left: 14px;
		width: auto;
		max-height: calc(100vh - 92px);
		overflow-y: auto;
	}

	.vc-background-picker-panel::before {
		display: none;
	}
}

@media (max-width: 430px) {
	.vc-background-picker-grid {
		grid-template-columns: 1fr;
	}

	.vc-background-option {
		grid-template-columns: 112px 1fr;
		grid-template-rows: 66px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vc-background-picker *,
	html[data-vice-background] body.vice-dark-2026 {
		transition: none !important;
	}
}

/* Explicit dimensions defeat the navbar's generic compact button rule. */
html:root body.vice-white-2026 .vc-background-picker-panel{
 width:min(430px,calc(100vw - 28px));padding:16px;border-color:var(--va-line)!important;
 background:var(--va-paper)!important;color:var(--va-ink)!important;max-height:calc(100dvh - 100px);overflow-y:auto;
}
html:root body.vice-white-2026 .vc-background-picker-panel::before{background:var(--va-paper)!important;border-color:var(--va-line)!important}
html:root body.vice-white-2026 .vc-background-picker-kicker{font-size:9px!important;color:var(--va-accent)!important;letter-spacing:1.2px!important}
html:root body.vice-white-2026 .vc-background-picker-title{font-size:17px!important;color:var(--va-ink)!important;text-transform:none!important;line-height:1.4!important}
html:root body.vice-white-2026 .vc-background-picker-note{font-size:11px!important;color:var(--va-muted)!important;text-transform:none!important;letter-spacing:0!important;line-height:1.6!important;margin-top:5px!important}
html:root body.vice-white-2026 .vc-background-picker-grid{gap:10px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
html:root body.vice-white-2026 .vc-background-picker .vc-background-option{
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:78px minmax(50px,auto)!important;
 width:100%!important;height:auto!important;min-height:130px!important;max-height:none!important;padding:0!important;margin:0!important;
 border:1px solid var(--va-line)!important;border-radius:10px!important;background:var(--va-soft)!important;box-shadow:none!important;
 text-align:left!important;line-height:1.3!important;letter-spacing:0!important;text-transform:none!important;overflow:hidden!important;align-items:stretch!important;
}
html:root body.vice-white-2026 .vc-background-picker .vc-background-option[aria-checked="true"]{border-color:var(--va-accent)!important;box-shadow:0 0 0 1px var(--va-accent)!important}
html:root body.vice-white-2026 .vc-background-picker .vc-background-option:focus-visible{outline:2px solid var(--va-link)!important;outline-offset:3px!important}
html:root body.vice-white-2026 .vc-background-option-preview{display:block!important;width:100%!important;height:100%!important;min-height:0!important;background-size:cover!important;background-position:center!important}
html:root body.vice-white-2026 .vc-background-option-copy{display:flex!important;min-height:50px!important;height:auto!important;box-sizing:border-box;padding:9px 10px!important;gap:6px!important;align-items:center!important}
html:root body.vice-white-2026 .vc-background-option-copy>span:first-child{min-width:0}
html:root body.vice-white-2026 .vc-background-option-name{display:block!important;font-size:12px!important;font-weight:750!important;color:var(--va-ink)!important;line-height:1.4!important;text-transform:none!important;letter-spacing:0!important}
html:root body.vice-white-2026 .vc-background-option-tone{display:block!important;font-size:9px!important;color:var(--va-muted)!important;line-height:1.5!important;text-transform:none!important;letter-spacing:0!important;margin-top:2px!important}
html:root body.vice-white-2026 .vc-background-option-check{width:19px!important;height:19px!important;flex:0 0 19px!important;background:var(--va-accent)!important;color:var(--va-page)!important}

html:root body.vice-white-2026 [data-vice-background-option="vice"] .vc-background-option-preview{background-image:url("../images/vice/v4/w14-mobile.webp")!important}
html:root body.vice-white-2026 [data-vice-background-option="idlewood"] .vc-background-option-preview{background-image:url("../images/vice/v4/w06-mobile.webp")!important}
html:root body.vice-white-2026 [data-vice-background-option="vice-beach"] .vc-background-option-preview{background-image:url("../images/vice/v4/w17-mobile.webp")!important}
html:root body.vice-white-2026 [data-vice-background-option="commerce"] .vc-background-option-preview{background-image:url("../images/vice/v4/w15-mobile.webp")!important}
html:root body.vice-white-2026 [data-vice-background-option="mulholland"] .vc-background-option-preview{background-image:url("../images/vice/v4/w19-mobile.webp")!important}
html:root body.vice-white-2026 [data-vice-background-option="downtown"] .vc-background-option-preview{background-image:url("../images/vice/v4/w24-mobile.webp")!important}

@media(max-width:760px){
 html:root body.vice-white-2026 .vc-background-picker-panel{position:fixed;top:72px;left:14px;right:14px;width:auto;max-height:calc(100dvh - 92px)}
}
@media(max-width:600px){html:root[data-vice-background]{--va-scene:var(--va-mobile)}}
@media(max-width:430px){
 html:root body.vice-white-2026 .vc-background-picker-grid{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
 html:root body.vice-white-2026 .vc-background-picker .vc-background-option{grid-template-columns:108px minmax(0,1fr)!important;grid-template-rows:64px!important;min-height:66px!important}
}

/* The historic navbar keeps a dark body class in both modes. Use the actual mode palette. */
html:root[data-vice-background] body.vice-white-2026 #viceBackgroundPickerPanel{
 background:var(--va-paper)!important;color:var(--va-ink)!important;border-color:var(--va-line)!important;
}
html:root[data-vice-background] body.vice-white-2026 #viceBackgroundPickerPanel::before{background:var(--va-paper)!important;border-color:var(--va-line)!important}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .vc-nav-utility.vc-nav-utility,
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .navbar-toggle{
 background:var(--va-soft)!important;border-color:var(--va-line)!important;color:var(--va-copy)!important;
}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .vc-nav-utility.vc-nav-utility :is(span,i),
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .navbar-toggle :is(span,i){color:var(--va-copy)!important}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .navbar-toggle .icon-bar{background:var(--va-copy)!important}
html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .vc-background-picker-toggle[aria-expanded="true"]{
 background:rgba(var(--va-accent-rgb),.15)!important;border-color:var(--va-accent)!important;
}

/* Keep the palette reachable when the old navbar hides all desktop utilities. */
@media(max-width:760px){
 html:root[data-vice-background] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .vc-nav-utilities{
  display:flex!important;position:absolute!important;right:134px!important;top:5px!important;
  width:44px!important;height:44px!important;margin:0!important;padding:0!important;gap:0!important;overflow:visible!important;
 }
 html:root[data-vice-background] body.vice-white-2026 .vc-home-navbar .vc-nav-utilities>:not(.vc-background-picker){display:none!important}
 html:root[data-vice-background] body.vice-white-2026 .vc-home-navbar .vc-background-picker-toggle{width:44px!important;height:44px!important}
 html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .vc-mobile-mode-toggle{
  background:var(--va-soft)!important;border-color:var(--va-line)!important;color:var(--va-copy)!important;
 }
 html:root[data-vice-background][data-vice-mode] body.vice-white-2026 .vc-home-navbar.vc-home-navbar .vc-mobile-mode-toggle i{color:var(--va-copy)!important}
}