/* Vice board icons 2026 (MessageIndex): sub-board symbols, topic state squares, legend.
   Loaded from MessageIndex.template.php (template_messageindex_init). Colours follow the
   inner-city tokens (--vi-*, light + html[data-vice-mode="dark"]) with vice-white fallbacks. */
body.vice-white-2026 {
	--vbi-paper: var(--vi-paper, var(--vw-card, #fff));
	--vbi-soft: var(--vi-soft, var(--vw-card-soft, #f8fbff));
	--vbi-line: var(--vi-line, var(--vw-line, #d9e3ef));
	--vbi-ink: var(--vi-ink, var(--vw-ink, #18243a));
	--vbi-muted: var(--vi-muted, var(--vw-muted, #728098));
	--vbi-teal: var(--vi-teal, var(--vw-blue, #1876cf));
	--vbi-pink: var(--vi-pink, var(--vw-pink-deep, #c85f8d));
	--vbi-gold: var(--vi-gold, var(--vw-warning, #d97706));
	--vbi-radius: 12px;
}
body.vice-white-2026.vice-forum-inner-city { --vbi-radius: 4px; }

/* Sub-board symbol: icon square instead of the 1020x92 banner strips. */
html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol {
	position: relative;
	display: grid !important;
	place-items: center;
	width: 46px !important;
	height: 46px !important;
	overflow: visible;
	border: 1px solid var(--vbi-line) !important;
	border-radius: var(--vbi-radius) !important;
	background: var(--vbi-soft) !important;
	color: var(--vbi-teal) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none !important;
	transition: border-color .15s, color .15s;
}
html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol--pink { color: var(--vbi-pink) !important; }
html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol > i { font-size: 18px; }
html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol img { display: none !important; }
html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol:hover { border-color: currentColor !important; }
html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol:is(.board_on,.board_on2)::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--vbi-paper);
	border-radius: 50%;
	background: var(--vbi-teal);
}
/* "Yeni" chip in the sub-board children line was blue text on a blue box. */
html body.vice-white-2026 [id$="_childboards"] .children .new_posts {
	display: inline-block;
	margin: 0 3px 0 0;
	padding: 1px 6px !important;
	border: 1px solid color-mix(in srgb, var(--vbi-teal) 35%, var(--vbi-line)) !important;
	border-radius: 4px !important;
	background: color-mix(in srgb, var(--vbi-teal) 10%, var(--vbi-paper)) !important;
	color: var(--vbi-teal) !important;
	font-size: 10px !important;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	vertical-align: 1px;
}

/* Topic state square. */
html body.vice-white-2026 #messageindex #topic_container .board_icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
body.vice-white-2026 .vbi {
	position: relative;
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--vbi-line);
	border-radius: var(--vbi-radius);
	background: var(--vbi-soft);
	color: var(--vbi-muted);
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
}
body.vice-white-2026 .vbi > i { font-size: inherit; line-height: 1; }
body.vice-white-2026 .vbi--sticky {
	color: var(--vbi-gold);
	border-color: color-mix(in srgb, var(--vbi-gold) 40%, var(--vbi-line));
	background: color-mix(in srgb, var(--vbi-gold) 12%, var(--vbi-paper));
}
body.vice-white-2026 .vbi--locked { color: var(--vbi-ink); }
body.vice-white-2026 .vbi--poll,
body.vice-white-2026 .vbi--icon { color: var(--vbi-teal); }
body.vice-white-2026 .vbi--hot {
	color: var(--vbi-pink);
	background: color-mix(in srgb, var(--vbi-pink) 7%, var(--vbi-paper));
}
body.vice-white-2026 .vbi--very-hot {
	color: var(--vbi-pink);
	border-color: color-mix(in srgb, var(--vbi-pink) 45%, var(--vbi-line));
	background: color-mix(in srgb, var(--vbi-pink) 14%, var(--vbi-paper));
}
body.vice-white-2026 .vbi--moved { border-style: dashed; background: transparent; }
body.vice-white-2026 .vbi.is-new { border-color: var(--vbi-teal); box-shadow: inset 0 0 0 1px var(--vbi-teal); }
body.vice-white-2026 .vbi--normal.is-new { color: var(--vbi-teal); }
body.vice-white-2026 .vbi__mine {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border: 2px solid var(--vbi-paper);
	border-radius: 50%;
	background: var(--vbi-ink);
	color: var(--vbi-paper);
	font-size: 7px;
}
body.vice-white-2026 .vbi--sm { width: 22px; height: 22px; font-size: 10px; }
body.vice-white-2026 .vbi--sm .vbi__mine { right: -5px; bottom: -5px; width: 13px; height: 13px; border-width: 1.5px; font-size: 5px; }

/* Watched mark (row icons + legend). */
body.vice-white-2026 .vbi-watch {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	color: var(--vbi-teal);
	font-size: 12px;
	vertical-align: middle;
}
body.vice-white-2026 #messageindex .icons .vbi-watch { margin-left: 4px; }

/* Legend under the topic list. */
html body.vice-white-2026 #topic_icons .vbi-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none;
	color: var(--vbi-muted);
	font-size: 12px;
}
html body.vice-white-2026 #topic_icons .vbi-legend li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 620px) {
	body.vice-white-2026 #messageindex .vbi:not(.vbi--sm) { width: 30px; height: 30px; font-size: 13px; }
	html body.vice-white-2026 #messageindex #topic_container .board_icon { align-self: start !important; padding-top: 4px !important; }
	html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol { width: 40px !important; height: 40px !important; }
	html body.vice-white-2026 [id$="_childboards"] .vice-board-symbol > i { font-size: 16px; }
	html body.vice-white-2026 #topic_icons .vbi-legend { gap: 8px 14px; }
}