/*
Theme Name: Starwide Encore
Theme URI: https://starwide.co
Author: Starwide Multimedia Solutions
Author URI: https://starwide.co
Description: Front-end presentation theme for the Starwide Encore platform — a social, media-hosting and content-showcase experience. Renders content, feeds, uploads and profiles supplied by the companion "Starwide Encore Core" plugin. Compatible with BuddyPress, bbPress and WooCommerce.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: starwide-encore
Tags: social, video, media, dark-mode, buddypress, bbpress, woocommerce
*/

/* =========================================================
   1. COLOR SYSTEM
   All color decisions live here as CSS custom properties so the
   Customizer (inc/customizer.php) can override them per-site and
   per-profile with a single inline <style> block. Never hardcode
   a color inside a template — reference a var() instead.
   ========================================================= */

:root {
	/* Brand palette */
	--sw-tumblr-blue: #001935;      /* default LIGHT-mode background (tumblr.com blue, not white) */
	--sw-charcoal: #1a1a1a;         /* default DARK-mode background */
	--sw-velvet-red: #7b0d2e;       /* primary button / pill color */
	--sw-velvet-red-hover: #99123a;
	--sw-link-yellow: #f5d547;      /* clickable-link highlight, outside the menu */
	--sw-gray: #8a8f98;
	--sw-white: #ffffff;
	--sw-black: #000000;

	/* NSFW state */
	--sw-nsfw-violet: #5b2a86;
	--sw-nsfw-text: #c9a6ff;

	/* Semantic tokens — templates and components use ONLY these */
	--sw-bg: var(--sw-tumblr-blue);
	--sw-bg-elevated: rgba(255, 255, 255, 0.06);
	--sw-text: var(--sw-white);           /* text is ALWAYS white, light or dark mode */
	--sw-text-muted: rgba(255, 255, 255, 0.72);
	--sw-link: var(--sw-link-yellow);
	--sw-button-bg: var(--sw-velvet-red);
	--sw-button-bg-hover: var(--sw-velvet-red-hover);
	--sw-button-text: var(--sw-white);
	--sw-border: rgba(255, 255, 255, 0.14);
	--sw-profile-field-bg: #4a7fc9;        /* light blue, per spec, for DM/custom form fields */
	--sw-profile-field-text: var(--sw-white);
	--sw-highlight: var(--sw-link-yellow); /* hover/tap highlight on post headlines */

	/* Spacing / radii reused across components */
	--sw-radius-pill: 999px;
	--sw-radius-card: 10px;
	--sw-gap: 1rem;

	/* Rating-tier colors (MPAA-style: G / PG / PG-13 / R / NC-17), plus
	   the real Project Encore tiers for image (3+.../18+) and audio
	   (standard/explicit) content, and a catch-all for anything else. */
	--sw-rating-g: #3f9142;
	--sw-rating-pg: #3f7f9e;
	--sw-rating-pg13: #c98a2e;
	--sw-rating-r: #b23a3a;
	--sw-rating-nc17: #6e1b1b;
	--sw-rating-nsfw: #7a1f3d;
	--sw-rating-3: #3f9142;
	--sw-rating-7: #3f8e6f;
	--sw-rating-12: #3f7f9e;
	--sw-rating-15: #c98a2e;
	--sw-rating-18: #b23a3a;
	--sw-rating-explicit: #7a1f3d;
	--sw-rating-other: #55607a;

	/* Per-content-type accent colors, used on card type badges / the
	   header ticker row so video/image/audio read apart at a glance. */
	--sw-type-video: #e0485a;
	--sw-type-image: #2fa3c4;
	--sw-type-audio: #8a5fd1;
	--sw-type-post: #55607a;

	--sw-star: #f3b63f;
	--sw-ribbon-new: #e0485a;

	/* Brand accent (logo mark, avatar fallback, active-nav underline,
	   search focus ring) — the bright blue from the Starwide branding. */
	--sw-brand-accent: #2f6fed;
}

[data-theme="dark"] {
	--sw-bg: var(--sw-charcoal);
	--sw-bg-elevated: rgba(255, 255, 255, 0.08);
	--sw-border: rgba(255, 255, 255, 0.18);
}

/*
 * Project Encore's own front-end stylesheet (assets/css/encore.css,
 * loaded by the plugin itself whenever a shortcode like [encore_upload]
 * or [encore_media] renders) is deliberately built on CSS custom
 * properties — its own header comment says "colours are overridable
 * via the custom properties below." Redeclaring them here is the
 * supported way to reskin it, rather than overriding dozens of
 * .encore-* classes one by one.
 *
 * Scoped to .sw-site (present on every page) rather than :root: a
 * descendant's own declared custom property always wins over an
 * ancestor's through normal CSS inheritance, so this is correct
 * regardless of whether style.css or encore.css happens to load
 * first — no specificity fight with the plugin's own :root block.
 */
.sw-site {
	--encore-accent: var(--sw-velvet-red);
	--encore-accent-ink: var(--sw-button-text);
	--encore-muted: var(--sw-text-muted);
	--encore-surface: var(--sw-bg-elevated);
	--encore-border: var(--sw-border);
	--encore-stage: #0d0d0d;
	--encore-radius: var(--sw-radius-card);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background-color: var(--sw-bg);
	color: var(--sw-text);
	font-family: Arial, Helvetica, sans-serif; /* body text: safe, legible default */
	margin: 0;
	min-height: 100vh;
	transition: background-color 0.25s ease;
}

/* Spec: posts/content copy defaults to an "aerial" font — mapped to the
   closest real, widely-available family: Arial/Helvetica. Swap the
   font-family below if a licensed "Arial"-alike webfont is added later. */
.sw-post-body,
.sw-content-title {
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: var(--sw-link);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* Menu links are explicitly excluded from the yellow highlight rule */
.sw-menu a,
.sw-menu a:hover {
	color: var(--sw-text);
	text-decoration: none;
}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

/* =========================================================
   3. BUTTONS
   All buttons: round pill, velvet red, white text — upload button
   is the one circular exception (plus-sign FAB).
   ========================================================= */

.sw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	background-color: var(--sw-button-bg);
	color: var(--sw-button-text);
	border: none;
	border-radius: var(--sw-radius-pill);
	padding: 0.55em 1.4em;
	font-weight: bold;
	font-size: 0.95rem;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.sw-btn:hover,
.sw-btn:focus-visible {
	background-color: var(--sw-button-bg-hover);
	text-decoration: none;
}

.sw-btn:active { transform: scale(0.97); }

.sw-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sw-border);
	background: transparent;
	color: var(--sw-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sw-icon-btn:hover { background-color: var(--sw-bg-elevated); }
.sw-icon-btn svg { width: 18px; height: 18px; }

.sw-btn-upload {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1;
}

/* =========================================================
   4. LAYOUT SHELL
   ========================================================= */

.sw-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sw-body-flex {
	display: flex;
	flex: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.sw-main {
	flex: 1;
	min-width: 0; /* allow grid children to shrink instead of overflowing the flex row */
	padding: 0 1rem;
}

/* =========================================================
   5. HEADER
   ========================================================= */

.sw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--sw-bg);
	border-bottom: 1px solid var(--sw-border);
}

.sw-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.65rem 1rem;
	max-width: 1440px;
	margin: 0 auto;
}

.sw-header__brand {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-shrink: 0;
}

.sw-header__brand-mark {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background-color: var(--sw-brand-accent);
	color: var(--sw-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sw-header__brand-mark svg { width: 16px; height: 16px; }

.sw-header__logo {
	display: block;
	height: auto;
	max-height: 40px;
	width: auto;
	max-width: 220px;
}

.sw-header__brand-text {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sw-text);
}

.sw-header__hamburger {
	display: none;
	background: none;
	border: none;
	color: var(--sw-text);
	font-size: 1.5rem;
}

.sw-header__media-nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-shrink: 0;
}

.sw-navlink {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var(--sw-text);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.3em 0.1em;
	border-bottom: 2px solid transparent;
}

.sw-navlink:hover,
.sw-navlink:focus-visible,
.sw-navlink.is-active {
	color: var(--sw-text);
	text-decoration: none;
	border-bottom-color: var(--sw-brand-accent);
}

.sw-navlink__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sw-header__downarrow {
	background: none;
	border: none;
	color: var(--sw-text-muted);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.4em;
}

.sw-header__downarrow:hover { color: var(--sw-text); }

/* Search sits inline in the header row on wide screens (compact pill,
   grows to fill remaining space) and wraps to its own full-width line
   on narrow ones, since .sw-header__row is flex-wrap. */
#sw-searchbar-row {
	flex: 1 1 220px;
	min-width: 160px;
	max-width: 420px;
}

.sw-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: auto;
}

.sw-icon-btn--notify { position: relative; }

.sw-icon-btn__dot {
	position: absolute;
	top: 6px;
	right: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sw-ribbon-new);
	border: 1.5px solid var(--sw-bg);
}

.sw-icon-btn--muted { border-color: transparent; color: var(--sw-text-muted); }

.sw-header__avatar {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sw-brand-accent);
	color: var(--sw-white);
	flex-shrink: 0;
}

.sw-header__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sw-header__avatar svg { width: 16px; height: 16px; }

/* Extended "down arrow" menu (ebooks/comics, games, posts, activity, + custom links) */
.sw-downmenu {
	position: absolute;
	left: auto;
	right: 0;
	top: calc(100% + 0.4rem);
	background-color: var(--sw-bg-elevated);
	backdrop-filter: blur(6px);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	min-width: 220px;
	padding: 0.5rem;
	display: none;
	flex-direction: column;
	z-index: 60;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.sw-downmenu.is-open { display: flex; }

.sw-downmenu a {
	color: var(--sw-text);
	padding: 0.5em 0.75em;
	border-radius: 6px;
}

.sw-downmenu a:hover {
	background-color: var(--sw-bg-elevated);
	color: var(--sw-link);
	text-decoration: none;
}

/* Ticker row: thin horizontally-scrolling strip of the most recent
   uploads, directly under the header (front page by default — see
   sw_encore_core_show_header_ticker). */
.sw-ticker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	border-top: 1px solid var(--sw-border);
	background-color: var(--sw-bg-elevated);
	overflow: hidden;
}

.sw-ticker__label {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sw-ribbon-new);
	border: 1px solid var(--sw-ribbon-new);
	border-radius: var(--sw-radius-pill);
	padding: 0.15em 0.6em;
}

.sw-ticker__track {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.sw-ticker__track::-webkit-scrollbar { display: none; }

.sw-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	color: var(--sw-text);
	font-size: 0.85rem;
	white-space: nowrap;
}

.sw-ticker__item:hover { color: var(--sw-link); text-decoration: none; }

.sw-ticker__item .sw-badge {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	flex-shrink: 0;
}

.sw-ticker__item .sw-badge svg { width: 11px; height: 11px; }

.sw-ticker__title {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sw-ticker__time {
	color: var(--sw-text-muted);
	font-size: 0.75rem;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.sw-ticker__label { display: none; }
	.sw-ticker__title { max-width: 140px; }
}

/* Search: a compact inline pill living inside .sw-header__row (see
   #sw-searchbar-row above) on wide screens; .initStickySearch() still
   pins it + the back button full-width when the user is on a search
   results page and scrolls, overriding this with position:fixed. */
.sw-searchbar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sw-searchbar-row.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0.65rem 1rem;
	background-color: var(--sw-bg);
	box-shadow: 0 4px 10px rgba(0,0,0,0.25);
	z-index: 60;
}

.sw-back-btn {
	background: none;
	border: none;
	color: var(--sw-text);
	font-size: 1.3rem;
	flex-shrink: 0;
}

.sw-search-form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sw-search-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.55em;
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	padding: 0.45em 1em;
}

.sw-search-input-wrap:focus-within { border-color: var(--sw-brand-accent); }

.sw-search-input-wrap__icon { width: 16px; height: 16px; color: var(--sw-text-muted); flex-shrink: 0; }

.sw-search-input-wrap input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--sw-text);
	font-size: 0.88rem;
	outline: none;
}

.sw-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 1rem 0.75rem;
}

.sw-search-filters .sw-chip {
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	padding: 0.3em 0.9em;
	font-size: 0.85rem;
	color: var(--sw-text-muted);
}

.sw-search-filters .sw-chip.is-active {
	background-color: var(--sw-velvet-red);
	color: var(--sw-white);
	border-color: transparent;
}

/* =========================================================
   6. SIDE MENU
   Desktop/tablet: a narrow icon-only rail (icons centered, labels
   hidden) — matches the compact reference layout. Mobile: the same
   links slide out as a labeled drawer, triggered by the hamburger.
   ========================================================= */

.sw-sidemenu {
	width: 72px;
	flex-shrink: 0;
	border-right: 1px solid var(--sw-border);
	padding: 1rem 0.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sw-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sw-rail-list--static {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--sw-border);
}

.sw-rail-link,
.sw-rail-list--static a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.6em 0.25em;
	border-radius: 10px;
	color: var(--sw-text-muted);
}

.sw-rail-link svg,
.sw-rail-list--static svg { width: 22px; height: 22px; }

.sw-rail-link:hover,
.sw-rail-link:focus-visible,
.sw-rail-link.is-active,
.sw-rail-list--static a:hover,
.sw-rail-list--static a:focus-visible {
	background-color: var(--sw-bg-elevated);
	color: var(--sw-text);
	text-decoration: none;
}

.sw-rail-link.is-active { color: var(--sw-link); }

/* Labels are hidden at rail width — re-shown in the mobile drawer below */
.sw-rail-text {
	font-size: 0.6rem;
	display: none;
}

@media (max-width: 1024px) {
	.sw-header__hamburger { display: inline-flex; }
	.sw-header__media-nav { display: none; }

	.sw-sidemenu {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		max-width: 78vw;
		width: 260px;
		background-color: var(--sw-bg);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 80;
		overflow-y: auto;
		box-shadow: 4px 0 16px rgba(0,0,0,0.3);
		padding: 1rem;
	}

	.sw-sidemenu.is-open { transform: translateX(0); }

	.sw-rail-link,
	.sw-rail-list--static a {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.75rem;
		font-weight: normal;
	}

	/* Spec: on mobile, Video/Photos/Audio stay bold+highlighted; the
	   rest of the (desktop down-arrow) items render as plain listings. */
	.sw-rail-link--primary { font-weight: bold; }

	.sw-rail-text { display: inline; font-size: 0.95rem; }

	.sw-sidemenu-scrim {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		z-index: 75;
	}

	.sw-sidemenu-scrim.is-open { display: block; }
}

/* =========================================================
   7. POST GRID / CAROUSEL (front page)
   ========================================================= */

.sw-section-title {
	font-size: 1.1rem;
	font-weight: bold;
	margin: 1.5rem 0 0.75rem;
}

/* Small red accent under a section title — used sparingly, only where
   the reference layout calls for it (e.g. "Top Playlists"), not as a
   default title treatment across the theme. */
.sw-section-title--accent {
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--sw-velvet-red);
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.sw-category-row { margin-top: 1rem; }

.sw-category-row__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.sw-category-row__heading .sw-section-title--accent { margin: 0; }

.sw-view-more {
	flex-shrink: 0;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	padding: 0.4em 1.1em;
	font-size: 0.8rem;
	font-weight: bold;
	color: var(--sw-text);
}

.sw-view-more:hover { background-color: var(--sw-bg-elevated); text-decoration: none; }

/* ---------------------------------------------------------
   Hero spotlight grid (front page "Presented" section):
   one large tile + one wide tile + two small tiles, bento-style.
   --------------------------------------------------------- */

.sw-hero-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--sw-gap);
	height: 560px;
}

.sw-spotlight {
	position: relative;
	display: block;
	border-radius: var(--sw-radius-card);
	overflow: hidden;
	background-color: #0d0d0d;
}

.sw-spotlight--main { grid-area: 1 / 1 / 3 / 2; }
.sw-spotlight--top { grid-area: 1 / 2 / 2 / 4; }
.sw-spotlight--bl { grid-area: 2 / 2 / 3 / 3; }
.sw-spotlight--br { grid-area: 2 / 3 / 3 / 4; }

.sw-spotlight .sw-card__thumb-wrap {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.sw-spotlight__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
	pointer-events: none;
}

.sw-spotlight__duration {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-white);
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.25em 0.6em;
	border-radius: 6px;
}

.sw-spotlight__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sw-spotlight__badge {
	width: fit-content;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-text);
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border-radius: 4px;
}

.sw-spotlight__title {
	color: var(--sw-white);
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.25;
}

.sw-spotlight--top .sw-spotlight__title,
.sw-spotlight--bl .sw-spotlight__title,
.sw-spotlight--br .sw-spotlight__title {
	font-size: 1rem;
}

.sw-spotlight__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.8rem;
	color: var(--sw-text-muted);
}

.sw-spotlight__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.sw-spotlight__meta svg { width: 14px; height: 14px; }

.sw-spotlight__live {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.75rem;
	font-weight: bold;
	color: var(--sw-white);
}

.sw-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #e23b3b;
	box-shadow: 0 0 0 0 rgba(226,59,59,0.6);
	animation: sw-live-pulse 1.8s infinite;
}

@keyframes sw-live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(226,59,59,0.55); }
	70% { box-shadow: 0 0 0 8px rgba(226,59,59,0); }
	100% { box-shadow: 0 0 0 0 rgba(226,59,59,0); }
}

@media (max-width: 1024px) {
	.sw-hero-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 280px 160px 160px;
		height: auto;
	}
	.sw-spotlight--main { grid-area: 1 / 1 / 2 / 3; }
	.sw-spotlight--top { grid-area: 2 / 1 / 3 / 3; }
	.sw-spotlight--bl { grid-area: 3 / 1 / 4 / 2; }
	.sw-spotlight--br { grid-area: 3 / 2 / 4 / 3; }
}

@media (max-width: 640px) {
	.sw-hero-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 220px);
	}
	.sw-spotlight--main,
	.sw-spotlight--top,
	.sw-spotlight--bl,
	.sw-spotlight--br {
		grid-area: auto;
	}
}

/* ---------------------------------------------------------
   Top playlists row — count + "Play all" + title label
   --------------------------------------------------------- */

.sw-playlist-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sw-gap);
}

.sw-playlist-card {
	position: relative;
	display: block;
	border-radius: var(--sw-radius-card);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.sw-playlist-card .sw-card__thumb-wrap {
	height: 100%;
	aspect-ratio: auto;
}

.sw-playlist-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 55%), linear-gradient(to right, rgba(0,0,0,0.35) 0%, transparent 40%);
	pointer-events: none;
}

.sw-playlist-card__count {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--sw-white);
	font-size: 1.15rem;
	font-weight: bold;
	line-height: 1.1;
}

.sw-playlist-card__count svg { width: 16px; height: 16px; margin-top: 0.2em; }

.sw-playlist-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	background-color: rgba(0,0,0,0.65);
	color: var(--sw-white);
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.5em 1.1em;
	border-radius: var(--sw-radius-pill);
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.sw-playlist-card:hover .sw-playlist-card__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.sw-playlist-card__label {
	position: absolute;
	left: 0.7rem;
	bottom: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--sw-white);
	font-weight: bold;
	font-size: 0.9rem;
}

.sw-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sw-gap);
}

@media (max-width: 1024px) {
	.sw-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.sw-grid { grid-template-columns: 1fr; }
}

.sw-card {
	position: relative;
	border-radius: var(--sw-radius-card);
	overflow: hidden;
	background-color: var(--sw-bg-elevated);
}

.sw-card__thumb-link {
	position: relative;
	display: block;
}

.sw-card__thumb-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #0d0d0d;
	overflow: hidden;
}

.sw-card__duration {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-white);
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.2em 0.5em;
	border-radius: 5px;
}

.sw-card__live {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background-color: rgba(0,0,0,0.75);
	color: var(--sw-white);
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.25em 0.6em;
	border-radius: var(--sw-radius-pill);
}

.sw-card__thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Missing/errored thumbnail: star-in-a-circle-with-cross stand-in */
.sw-card__thumb-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0d0d0d;
}

.sw-card__thumb-fallback svg { width: 42%; height: 42%; opacity: 0.6; }

/* Per-content-type icon shown bottom-right of every thumbnail */
.sw-card__type-icon {
	position: absolute;
	bottom: 0.4rem;
	right: 0.4rem;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.65);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-card__type-icon svg { width: 60%; height: 60%; fill: var(--sw-white); }

/* NSFW override thumbnail: bright violet with purple "NSFW" text */
.sw-card--nsfw .sw-card__thumb-wrap,
.sw-card__thumb-fallback.is-nsfw {
	background-color: var(--sw-nsfw-violet);
}

.sw-card__nsfw-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sw-nsfw-text);
	font-weight: bold;
	letter-spacing: 0.08em;
	background-color: var(--sw-nsfw-violet);
}

.sw-card__title {
	display: block;
	color: var(--sw-white);
	font-weight: bold;
	font-size: 1rem;
	padding: 0.6rem 0.7rem 0.3rem;
}

.sw-card__title:hover,
.sw-card__title:focus-visible,
.sw-card.is-active .sw-card__title {
	color: var(--sw-highlight);
	text-decoration: none;
}

.sw-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.7rem 0.75rem;
}

.sw-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;   /* personal profile pictures: always circular */
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--sw-border);
}

.sw-avatar--brand {
	border-radius: 6px;   /* brand / sub-profile pictures: always square */
}

.sw-card__meta-name {
	font-size: 0.85rem;
	color: var(--sw-text-muted);
}

.sw-card__meta-avatar { position: relative; flex-shrink: 0; display: inline-flex; }

.sw-card__verified {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #2fb866;
	border: 2px solid var(--sw-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-card__verified svg { width: 9px; height: 9px; stroke-width: 3; color: var(--sw-white); }

.sw-card__commerce {
	padding: 0 0.7rem 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: bold;
}

.sw-card__price { color: #2fb866; }
.sw-card__price--was { color: var(--sw-velvet-red); text-decoration: line-through; font-weight: normal; }

.sw-card__membership {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--sw-link);
}

.sw-card__membership svg { width: 14px; height: 14px; }

.sw-card__stats {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0 0.7rem 0.75rem;
	font-size: 0.8rem;
	color: var(--sw-text-muted);
}

.sw-card__stats span {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.sw-card__stats svg { width: 14px; height: 14px; }

/* "end of posts" infinite-scroll sentinel */
.sw-feed-end {
	text-align: center;
	padding: 2rem 0;
	color: var(--sw-text-muted);
	font-weight: bold;
}

.sw-feed-loading {
	text-align: center;
	padding: 1.5rem 0;
	color: var(--sw-text-muted);
}

/* =========================================================
   8. FOOTER
   ========================================================= */

.sw-footer {
	border-top: 1px solid var(--sw-border);
	padding: 2.5rem 1rem 1.5rem;
	font-size: 0.85rem;
	color: var(--sw-text-muted);
}

.sw-footer__columns {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 2rem;
	text-align: left;
}

@media (max-width: 1024px) {
	.sw-footer__columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.sw-footer__columns { grid-template-columns: 1fr; }
}

.sw-footer__brand {
	display: block;
	font-weight: bold;
	font-size: 1.15rem;
	color: var(--sw-text);
	margin-bottom: 0.6rem;
}

.sw-footer__brand:hover { text-decoration: none; color: var(--sw-link); }

.sw-footer__about-text { margin: 0; line-height: 1.6; }

.sw-footer__col-title {
	font-size: 0.85rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sw-text);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sw-velvet-red);
	margin: 0 0 0.9rem;
	display: inline-block;
}

.sw-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sw-footer__list a { color: var(--sw-text-muted); }
.sw-footer__list a:hover { color: var(--sw-link); text-decoration: none; }

.sw-footer__post {
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.sw-footer__post-thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--sw-bg-elevated);
}

.sw-footer__post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sw-footer__post-body { display: flex; flex-direction: column; gap: 0.3rem; }

.sw-footer__post-title {
	color: var(--sw-text);
	font-size: 0.85rem;
	font-weight: bold;
	line-height: 1.3;
}

.sw-footer__post:hover .sw-footer__post-title { color: var(--sw-link); }

.sw-footer__post-views {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.75rem;
	color: var(--sw-text-muted);
}

.sw-footer__post-views svg { width: 12px; height: 12px; }

.sw-footer__connect {
	max-width: 1440px;
	margin: 2rem auto 0;
	text-align: center;
}

.sw-footer__social {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.sw-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--sw-bg-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-footer__social svg { width: 50%; height: 50%; color: var(--sw-text); }

.sw-footer__bottom {
	max-width: 1440px;
	margin: 2rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sw-border);
	text-align: center;
}

.sw-footer__bottom p { margin: 0; }

/* =========================================================
   9. CONTENT / THEATER WINDOW
   ========================================================= */

.sw-theater {
	background-color: #000;
	border-radius: var(--sw-radius-card);
	position: relative;
	overflow: hidden;
	margin-top: 1rem;
}

.sw-theater__media {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-theater__like {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sw-theater__media.is-active .sw-theater__like,
.sw-theater__media.is-active .sw-theater__controls,
.sw-theater__media.is-active .sw-theater__flag {
	opacity: 1;
}

.sw-theater__controls {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	gap: 0.5rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sw-theater__flag {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sw-theater-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1rem;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sw-theater-meta__left {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sw-theater-meta__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sw-theater-sidebadges {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
}

.sw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	padding: 0.2em 0.6em;
	border-radius: var(--sw-radius-pill);
	background-color: var(--sw-bg-elevated);
	width: fit-content;
}

.sw-badge--rating-g { background-color: var(--sw-rating-g); }
.sw-badge--rating-pg { background-color: var(--sw-rating-pg); }
.sw-badge--rating-pg13 { background-color: var(--sw-rating-pg13); }
.sw-badge--rating-r { background-color: var(--sw-rating-r); }
.sw-badge--rating-nc17 { background-color: var(--sw-rating-nc17); }
.sw-badge--rating-nsfw { background-color: var(--sw-rating-nsfw); }
.sw-badge--rating-3 { background-color: var(--sw-rating-3); }
.sw-badge--rating-7 { background-color: var(--sw-rating-7); }
.sw-badge--rating-12 { background-color: var(--sw-rating-12); }
.sw-badge--rating-15 { background-color: var(--sw-rating-15); }
.sw-badge--rating-18 { background-color: var(--sw-rating-18); }
.sw-badge--rating-explicit { background-color: var(--sw-rating-explicit); }
.sw-badge--rating-other { background-color: var(--sw-rating-other); }

/* ---- Star rating, NEW ribbon, colored type badge (bento/ticker refresh) ---- */
.sw-star-rating {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

.sw-star-rating__star {
	width: 14px;
	height: 14px;
	color: var(--sw-border);
}

.sw-star-rating__star svg { width: 100%; height: 100%; display: block; }

.sw-star-rating__star.is-filled { color: var(--sw-star); }

.sw-ribbon-new {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background-color: var(--sw-ribbon-new);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2em 0.55em;
	border-radius: 4px;
	z-index: 2;
}

.sw-badge--type-video { background-color: var(--sw-type-video); }
.sw-badge--type-image { background-color: var(--sw-type-image); }
.sw-badge--type-audio { background-color: var(--sw-type-audio); }
.sw-badge--type-post { background-color: var(--sw-type-post); }

/* Colored type badge on the card thumbnail — bottom-left, out of the
   way of the duration badge (top-right) and Live Chat badge (bottom-right). */
.sw-card__thumb-link > .sw-badge {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	padding: 0.3em;
	line-height: 0;
}

.sw-card__thumb-link > .sw-badge svg { width: 14px; height: 14px; display: block; }

.sw-card__relative-time {
	color: var(--sw-text-muted);
	font-size: 0.8rem;
}

/* Watch/read progress bar — shown only when sw_encore_core_watch_progress
   returns a value (e.g. from a "continue watching" integration). */
.sw-card__progress {
	height: 3px;
	background-color: var(--sw-border);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 0.35rem;
}

.sw-card__progress-fill {
	height: 100%;
	background-color: var(--sw-velvet-red);
}

.sw-likebar {
	display: flex;
	height: 6px;
	border-radius: var(--sw-radius-pill);
	overflow: hidden;
	background-color: var(--sw-bg-elevated);
	width: 160px;
}

.sw-likebar__like { background-color: var(--sw-link-yellow); }
.sw-likebar__dislike { background-color: var(--sw-gray); }

/* Book / comic reader mode: taller page frame + prev/next controls */
.sw-reader {
	aspect-ratio: 8.5 / 11;
	max-width: 620px;
	margin: 0 auto;
	background-color: #0d0d0d;
	border-radius: var(--sw-radius-card);
	position: relative;
}

.sw-reader__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.5);
	border: none;
	color: var(--sw-white);
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.sw-reader__nav--prev { left: 0.75rem; }
.sw-reader__nav--next { right: 0.75rem; }

.sw-reader__jump--start { position: absolute; top: 0.75rem; left: 0.75rem; }
.sw-reader__jump--end { position: absolute; top: 0.75rem; right: 0.75rem; }

/* =========================================================
   10. COMMENTS
   ========================================================= */

.sw-comments { padding: 1rem 0 2rem; }

.sw-comment {
	display: flex;
	gap: 0.65rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--sw-border);
}

.sw-comment--top {
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 0.85rem;
	border-bottom: none;
	margin-bottom: 0.5rem;
}

.sw-comment__body { flex: 1; }

.sw-comment__text.is-truncated {
	display: -webkit-box;
	-webkit-line-clamp: 6; /* approximates the ~300-character cap */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sw-comment__replies {
	margin-left: 2.5rem;
	border-left: 1px solid var(--sw-border);
	padding-left: 1rem;
}

/* =========================================================
   11. CUSTOM FORM FIELDS (profile DM form)
   ========================================================= */

.sw-form-field {
	background-color: var(--sw-profile-field-bg);
	color: var(--sw-profile-field-text);
	border: none;
	border-radius: 8px;
	padding: 0.6em 0.9em;
	width: 100%;
}

/* =========================================================
   12. AD SLOTS
   ========================================================= */

.sw-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1rem auto;
	overflow: hidden;
}

.sw-ad-slot--infeed { grid-column: 1 / -1; min-height: 120px; }
.sw-ad-slot--top { margin-top: 0; margin-bottom: 1rem; }
.sw-ad-slot--interstitial {
	width: 1280px;
	max-width: 100%;
	aspect-ratio: 1280 / 720;
}

.sw-ad-skip {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	background-color: rgba(0,0,0,0.7);
	color: var(--sw-white);
	border: none;
	border-radius: var(--sw-radius-pill);
	padding: 0.4em 1em;
	font-size: 0.85rem;
}

/* Spec: NSFW content never carries ads */
.sw-card--nsfw .sw-ad-slot,
.sw-theater--nsfw .sw-ad-slot {
	display: none !important;
}

/* =========================================================
   13. AGE-GATE NOTICE
   ========================================================= */

.sw-age-gate {
	max-width: 480px;
	margin: 3rem auto;
	text-align: center;
	padding: 2rem;
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
}

.sw-age-gate svg { width: 64px; height: 64px; margin-bottom: 1rem; }

/* =========================================================
   14. UPLOAD / SUBMIT PAGE
   ========================================================= */

.sw-upload-banner {
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 1.5rem;
	text-align: center;
	margin: 1.5rem 0;
}

.sw-upload-banner h1 { margin: 0; font-size: 1.4rem; }

/* Wraps whatever Encore Core's [encore_upload] shortcode renders so it
   inherits the theme's max-width/gutters instead of running edge-to-edge. */
.sw-upload-wrap {
	max-width: 860px;
	margin: 0 auto 3rem;
}

.sw-upload-wrap .encore-notice {
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-card);
	padding: 1.25rem;
	text-align: center;
}

/*
 * Project Encore's own CSS (assets/css/encore.css) reskins via the
 * --encore-* custom properties above, but never touches native form
 * controls (text/url/number inputs, <select>, checkboxes) — those were
 * rendering with the browser's bare default white-on-black-text
 * appearance, which is where most of the "doesn't look finished" read
 * comes from. Styled generically under .encore-uploader (and the
 * handful of other Encore components that use plain form fields) so
 * every shortcode gets this, not just the upload wizard.
 */
.encore-uploader input[type="text"],
.encore-uploader input[type="url"],
.encore-uploader input[type="number"],
.encore-uploader select,
.encore-uploader textarea,
.encore-dialog input:not([type="checkbox"]):not([type="radio"]),
.encore-dialog select,
.encore-age-form input,
.encore-table input[type="text"],
.encore-table input[type="number"] {
	background-color: var(--sw-bg-elevated);
	border: 1px solid var(--sw-border);
	border-radius: 6px;
	color: var(--sw-text);
	padding: 0.5em 0.75em;
	font-size: 0.9rem;
	font-family: inherit;
}

.encore-uploader input::placeholder,
.encore-uploader textarea::placeholder {
	color: var(--sw-text-muted);
}

.encore-uploader input[type="text"]:focus,
.encore-uploader input[type="url"]:focus,
.encore-uploader input[type="number"]:focus,
.encore-uploader select:focus,
.encore-uploader textarea:focus {
	outline: none;
	border-color: var(--sw-velvet-red);
}

.encore-uploader input[type="checkbox"],
.encore-dialog input[type="checkbox"] {
	accent-color: var(--sw-velvet-red);
	width: 16px;
	height: 16px;
}

/* The "Apply to all" bar and each queued file row already pick up
   --encore-surface/--encore-border/--encore-radius from the retheme
   above; this just gives the bar its own subtle fill so it reads as a
   distinct control strip rather than floating directly on the page bg. */
.encore-batch {
	background-color: var(--sw-bg-elevated);
}

.encore-batch strong { color: var(--sw-text); }

.encore-drop__lead,
.encore-drop__limits { color: var(--sw-text); }

.encore-drop__limits { color: var(--sw-text-muted); }

.encore-url-ingest summary { font-weight: 600; }

.sw-upload-gate {
	max-width: 420px;
	margin: 2rem auto 4rem;
	text-align: center;
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 2.5rem 2rem;
}

.sw-upload-gate svg { width: 40px; height: 40px; margin-bottom: 1rem; }

.sw-upload-gate p { margin: 0 0 1.5rem; }

.sw-upload-gate .sw-btn { display: block; margin: 0 0 0.75rem; }

.sw-btn--solid { background-color: var(--sw-button-bg); color: var(--sw-button-text); }
.sw-btn--solid:hover { background-color: var(--sw-button-bg-hover); }

.sw-btn--outline {
	background-color: transparent;
	border: 1px solid var(--sw-border);
	color: var(--sw-text);
}
.sw-btn--outline:hover { background-color: var(--sw-bg-elevated); }

.sw-upload-form {
	max-width: 760px;
	margin: 0 auto 4rem;
	background-color: var(--sw-bg-elevated);
	border-radius: var(--sw-radius-card);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sw-upload-label {
	display: block;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sw-text-muted);
	margin: 1rem 0 0.4rem;
}

.sw-upload-input,
.sw-upload-textarea {
	width: 100%;
	background-color: var(--sw-bg);
	border: 1px solid var(--sw-border);
	border-radius: 8px;
	color: var(--sw-text);
	padding: 0.65em 0.9em;
	font-size: 0.95rem;
	font-family: inherit;
}

.sw-upload-textarea { resize: vertical; }

.sw-upload-hint {
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	color: var(--sw-text-muted);
}

.sw-upload-field-group {
	background-color: var(--sw-bg);
	border-radius: var(--sw-radius-card);
	padding: 1.1rem;
	margin-top: 1rem;
}

.sw-pill-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

@media (max-width: 640px) {
	.sw-pill-grid { grid-template-columns: 1fr; }
}

.sw-pill-toggle {
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	background-color: transparent;
	color: var(--sw-text-muted);
	padding: 0.55em 1em;
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.02em;
}

.sw-pill-toggle.is-active,
.sw-pill-toggle[aria-pressed="true"] {
	background-color: var(--sw-velvet-red);
	border-color: transparent;
	color: var(--sw-white);
}

.sw-pill-toggle--nsfw {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 1rem;
	width: fit-content;
}

.sw-pill-toggle--nsfw svg { width: 16px; height: 16px; }

.sw-pill-toggle--nsfw.is-active {
	background-color: var(--sw-nsfw-violet);
}

.sw-media-mode-toggle {
	display: inline-flex;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-pill);
	overflow: hidden;
	margin-bottom: 0.9rem;
}

.sw-media-mode-btn {
	background-color: transparent;
	border: none;
	color: var(--sw-text-muted);
	padding: 0.5em 1.2em;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.sw-media-mode-btn svg { width: 16px; height: 16px; }

.sw-media-mode-btn.is-active {
	background-color: var(--sw-text);
	color: var(--sw-bg);
}

.sw-media-slots {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sw-media-slot { position: relative; }

.sw-media-dropzone {
	border: 2px dashed var(--sw-border);
	border-radius: var(--sw-radius-card);
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--sw-text-muted);
	cursor: pointer;
}

.sw-media-dropzone:hover { border-color: var(--sw-velvet-red); color: var(--sw-text); }

.sw-media-add {
	margin-top: 1rem;
	width: 44px;
	height: 44px;
}

.sw-upload-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.sw-upload-actions .sw-upload-submit { flex: 1; }