/* ════════════════════════════════════════════════════════════
   v11.1 GLOBAL RULES (deliberately outside the desktop media query)
   ════════════════════════════════════════════════════════════ */

/* Below the desktop breakpoint every element this layer injects must
   vanish. Their styling lives inside @media (min-width:1200px), so on a
   phone the theme's own button styles won — Neve paints bare <button>s
   as solid accent squares, which is exactly the blue-square bug. */
@media (max-width: 1199.98px) {
	[class*="vf-desk-"],
	[class*="vf-pro-"] { display: none !important; }
}

/* The "All Styles" results button duplicates the category sidebar on
   desktop and the horizontal rail on phones. app.js writes into it on
   every render, so the nodes must stay — they are hidden, not removed. */
.vf-results-menu-btn,
#vf-results-menu { display: none !important; }

/**
 * Vini Fonts — desktop layer (Phase 1)
 * ------------------------------------------------------------------
 * Additive. Everything below 1200px is untouched: the phone layout,
 * the sticky toolbar, the swipe rail and the 1-column grid all keep
 * behaving exactly as they do in 10.4.1.
 *
 * Load AFTER vini-fonts.css. Requires the desktop markup printed by
 * class-vini-fonts-desktop.php (body class `vf-desk`), plus
 * vini-fonts-desktop.js for the mode/density switches.
 *
 * Colours, radii and shadows come from the existing --vf-* tokens.
 * No new palette.
 */

/* Desktop-only tokens, declared here so they can be overridden per site:
     .vf-app { --vf-side-w: 260px; --vf-dock-w: 340px; }               */
.vf-app.vf-desk {
	--vf-side-w:  250px;
	--vf-dock-w:  336px;
	--vf-desk-gap: 20px;
}

/* ══ 1. The three-column shell ═══════════════════════════════════ */
@media (min-width: 1200px) {

	.vf-app.vf-desk {
		display: grid;
		grid-template-columns: var(--vf-side-w) minmax(0, 1fr) var(--vf-dock-w);
		align-items: start;
		gap: 0;
		background: var(--vf-bg);
		border: 1px solid var(--vf-border);
		border-radius: var(--vf-radius-lg);
		overflow: clip;               /* keeps the sticky children inside  */
	}

	/* The phone toolbar stops being sticky: the composer inside it sticks
	   on its own, and the rail has moved to the sidebar. */
	.vf-desk .vf-toolbar { position: static; box-shadow: none; background: none; padding: 0; }
	.vf-desk .vf-toolbar-inner { display: block; }
	/* v11.3.1: the sentinel must NEVER be display:none — a display:none
	   element reports zeroed rects, which made computePinned() read
	   "pinned" forever and latch the fixed fallback. Only the spacer is
	   hidden; the sentinel is parked off-screen by JS instead. */
	.vf-desk .vf-toolbar-spacer { display: none !important; height: 0 !important; }

	/* ── sidebar ─────────────────────────────────────────────── */
	.vf-desk-side {
		grid-column: 1;
		position: sticky;
		top: var(--vf-sticky-top, 0px);
		align-self: start;
		max-height: calc(100vh - var(--vf-sticky-top, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px 8px 18px;
		background: var(--vf-surface);
		border-right: 1px solid var(--vf-border);
		scrollbar-width: thin;
	}
	.vf-desk-side::-webkit-scrollbar { width: 8px; }
	.vf-desk-side::-webkit-scrollbar-thumb { background: var(--vf-text-light); border-radius: 100px; }

	.vf-desk-search {
		display: flex; align-items: center; gap: 8px;
		height: 38px; margin: 0 6px 14px; padding: 0 10px;
		background: var(--vf-surface-2);
		border: 1px solid var(--vf-border);
		border-radius: var(--vf-radius-pill);
	}
	.vf-desk-search input {
		flex: 1; min-width: 0; border: 0; background: none; outline: none;
		font: 500 12.5px/1 var(--vf-font-body); color: var(--vf-text);
	}
	.vf-desk-search input::placeholder { color: var(--vf-text-3); font-weight: 400; }
	.vf-desk-search kbd {
		font: 600 10px/1 var(--vf-font-body); color: var(--vf-text-3);
		background: var(--vf-surface); border: 1px solid var(--vf-border);
		border-radius: 5px; padding: 3px 5px;
	}

	.vf-desk-side .vf-desk-group-name {
		display: block; padding: 12px 8px 6px;
		font: 700 9.5px/1 var(--vf-font-body);
		letter-spacing: .14em; text-transform: uppercase;
		color: var(--vf-text-3);
	}
	.vf-desk-side .vf-desk-group-name:first-of-type { padding-top: 0; }

	/* the rail pills become sidebar rows — same nodes, moved by the JS */
	.vf-desk-side .vf-rail {
		display: block; overflow: visible; padding: 0; margin: 0;
		mask-image: none; -webkit-mask-image: none;
	}
	.vf-desk-side .vf-rail::-webkit-scrollbar { display: none; }
	.vf-desk-side .vf-pill {
		display: flex; align-items: center; gap: 8px;
		width: 100%; height: 30px; padding: 0 10px; margin: 0;
		border: 0; border-left: 3px solid transparent;
		border-radius: var(--vf-radius-sm);
		background: none;
		font: 500 12.5px/1 var(--vf-font-body); color: var(--vf-text-2);
		text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.vf-desk-side .vf-pill:hover { background: var(--vf-surface-2); color: var(--vf-text); }
	.vf-desk-side .vf-pill.active,
	.vf-desk-side .vf-pill[aria-selected="true"] {
		background: rgba(99, 102, 241, .09);
		border-left-color: var(--vf-accent);
		color: #4338ca;
		font-weight: 600;
	}
	.vf-desk-side .vf-pill .vf-pill-n { margin-left: auto; font: 600 10.5px/1 var(--vf-font-body); color: var(--vf-text-light); }
	.vf-desk-side .vf-pill.active .vf-pill-n { color: var(--vf-accent); }
	.vf-desk-side .vf-pill-emoji { color: #c2410c; }

	/* ── centre column ───────────────────────────────────────── */
	.vf-desk-main { grid-column: 2; min-width: 0; padding: 18px var(--vf-desk-gap) 26px; }
	.vf-desk .vf-section { padding: 0; }
	.vf-desk .vf-section + .vf-section { margin-top: 13px; }

	/* composer: input + clan tag + the two switches, one block */
	.vf-desk-compose {
		/* v11.2: NOT sticky. The composer pinning on scroll was this very
		   rule — the ask is the opposite: composer stays in flow, the two
		   rails stick, only the grid moves. */
		position: static;
		margin-bottom: 13px;
		background: var(--vf-surface);
		border: 1px solid var(--vf-border);
		border-radius: var(--vf-radius-lg);
		box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
		overflow: hidden;
	}
	.vf-desk-modes {
		display: flex; align-items: center; gap: 10px;
		padding: 11px 15px; border-bottom: 1px solid var(--vf-border);
	}
	.vf-desk-seg { display: flex; gap: 2px; padding: 3px; background: var(--vf-surface-2); border-radius: var(--vf-radius-pill); }
	.vf-desk-seg button {
		border: 0; background: none; cursor: pointer;
		padding: 7px 15px; border-radius: var(--vf-radius-pill);
		font: 600 11.5px/1 var(--vf-font-body); color: var(--vf-text-3);
	}
	.vf-desk-seg button[aria-pressed="true"] { background: var(--vf-text); color: #fff; }
	.vf-desk-modes-hint { margin-left: auto; font: 500 11px/1 var(--vf-font-body); color: var(--vf-text-3); }

	.vf-desk .vf-input-wrapper { margin: 0; padding: 13px 15px; }
	.vf-desk .vf-input { font-size: 22px; }

	/* the tools row moves in here and stops looking like a filter strip */
	.vf-desk .vf-tools-row {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: start;
		align-items: stretch;
		gap: 8px 10px;
		padding: 11px 15px;
		border-top: 1px solid var(--vf-border);
		background: linear-gradient(180deg, rgba(99, 102, 241, .045), rgba(99, 102, 241, 0));
		overflow: visible;
	}
	.vf-desk .vf-tool {
		height: 44px; padding: 0 12px; gap: 10px;
		border-radius: 12px;
		border: 1.5px solid var(--vf-border);
		background: var(--vf-surface);
	}
	.vf-desk .vf-tool-label { font: 700 8.5px/1 var(--vf-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--vf-text-3); }
	.vf-desk .vf-tool-state { font: 600 13px/1 var(--vf-font-body); color: var(--vf-text); }
	.vf-desk .vf-tool-labels { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
	.vf-desk .vf-tool.vf-toggle-on {
		border-color: transparent;
		background: linear-gradient(135deg, var(--vf-accent), var(--vf-accent-2));
		box-shadow: 0 4px 14px rgba(99, 102, 241, .3);
	}
	.vf-desk .vf-tool.vf-toggle-on .vf-tool-label { color: rgba(255, 255, 255, .72); }
	.vf-desk .vf-tool.vf-toggle-on .vf-tool-state,
	.vf-desk .vf-tool.vf-toggle-on .vf-tool-icon { color: #fff; }
	/* a category that ignores the switches says so instead of going dead */
	.vf-desk .vf-tool[data-inert="1"] { opacity: .55; }
	.vf-desk .vf-tool[data-inert="1"]::after {
		content: "always on here";
		font: 500 9.5px/1 var(--vf-font-body); color: var(--vf-text-3);
	}
	/* the wheel opens under its own control, not as a fourth row */
	.vf-desk .vf-wheel-row { margin: 0 15px 12px; border-radius: var(--vf-radius); }

	/* context bar: results label, filters, density */
	.vf-desk .vf-results-bar { gap: 9px; margin-bottom: 13px; }
	.vf-desk-den { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-pill); }
	.vf-desk-den button {
		display: grid; place-items: center; width: 30px; height: 26px;
		border: 0; border-radius: var(--vf-radius-pill); background: none;
		color: var(--vf-text-3); cursor: pointer;
	}
	.vf-desk-den button[aria-pressed="true"] { background: var(--vf-text); color: #fff; }
	.vf-desk-den svg { width: 14px; height: 14px; }

	/* ── dock ────────────────────────────────────────────────── */
	.vf-desk-dock {
		grid-column: 3;
		position: sticky;
		top: var(--vf-sticky-top, 0px);
		align-self: start;
		max-height: calc(100vh - var(--vf-sticky-top, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px;
		background: var(--vf-surface);
		border-left: 1px solid var(--vf-border);
		display: flex; flex-direction: column; gap: 12px;
	}
	.vf-desk-dock-ad { margin-top: auto; }

	.vf-desk-dock-slot { min-width: 0; }
	.vf-desk-dock-slot[hidden] { display: none; }

	/* the pinned/recent row becomes a dock panel */
	.vf-desk .vf-yours { padding: 0; }
	.vf-desk .vf-yours-row { flex-wrap: wrap; }
	.vf-desk .vf-yours-head { margin-bottom: 8px; }

	/* ══ 2. Density — single column default, two optional ═══════ */
	.vf-desk .vf-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.vf-desk.vf-den-2 .vf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* ══ 3. Hover popover — the full, unclipped string ═══════════ */
	.vf-desk .vf-card { position: relative; }
	/* card hover popover — named .vf-desk-pop: core adds .vf-pop to the
	   WHEEL ROW for its entrance animation, and this rule was catching it,
	   leaving the open wheel absolutely positioned, invisible and
	   pointer-events:none. That was the "Decoration / Gaming buttons do
	   nothing" bug on desktop. */
	.vf-desk .vf-desk-pop {
		position: absolute;
		left: 6px; top: calc(100% + 10px);
		width: min(520px, 148%);
		z-index: 60;
		padding: 15px 17px 14px;
		background: var(--vf-surface);
		border: 1px solid var(--vf-border);
		border-radius: var(--vf-radius-lg);
		box-shadow: 0 20px 46px rgba(15, 23, 42, .18);
		opacity: 0; visibility: hidden; transform: translateY(-4px);
		transition: opacity .14s ease, transform .14s ease, visibility .14s;
		pointer-events: none;
	}
	.vf-desk .vf-card:hover .vf-desk-pop,
	.vf-desk .vf-card:focus-within .vf-desk-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
	.vf-desk .vf-card:hover { z-index: 61; }
	.vf-desk-pop-kicker { font: 700 9.5px/1 var(--vf-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--vf-text-3); }
	.vf-desk-pop-full {
		margin: 9px 0 11px;
		font-family: var(--vf-font-glyph);
		font-size: 27px; line-height: 1.45; color: var(--vf-text);
		word-break: break-word;
	}
	.vf-desk-pop-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; font: 500 11.5px/1 var(--vf-font-body); color: var(--vf-text-2); }
	.vf-desk-pop-ok   { color: #059669; font-weight: 600; }
	.vf-desk-pop-over { color: #ef4444; font-weight: 600; }
	.vf-desk-pop-warn { color: #b45309; font-weight: 600; }
	.vf-desk-pop-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; }

	/* ══ 4. Text & design mode ══════════════════════════════════ */
	.vf-desk.vf-mode-design .vf-input { min-height: 76px; font-size: 18px; }
	.vf-desk.vf-mode-design .vf-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.vf-desk.vf-mode-design .vf-card-preview {
		white-space: normal;          /* the nowrap ellipsis is a name-mode rule */
		overflow: visible;
		text-overflow: clip;
		font-size: 25px;
		line-height: 1.45;
		word-break: break-word;
	}
	.vf-desk.vf-mode-design .vf-char-count { display: none; }
	.vf-desk.vf-mode-design .vf-desk-pop { display: none; }   /* nothing is clipped, so nothing to reveal */

	/* ══ 5. Modals become panels ════════════════════════════════ */
	.vf-desk .vf-social-overlay.vf-docked { position: static; background: none; display: block; }
	.vf-desk .vf-social-overlay.vf-docked .vf-social-modal {
		width: 100%; max-height: none; transform: none;
		border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
		box-shadow: none; padding: 0;
	}
	.vf-desk .vf-social-overlay.vf-docked .vf-social-close,
	.vf-desk .vf-social-overlay.vf-docked .vf-social-head p { display: none; }
	.vf-desk .vf-social-overlay.vf-docked .vf-social-strip { display: block; overflow: visible; }
	.vf-desk .vf-social-overlay.vf-docked .vf-phone { width: 100%; }
	.vf-desk .vf-social-overlay.vf-docked .vf-phone[hidden] { display: none; }

	/* ══ 6. Keyboard affordances ════════════════════════════════ */
	.vf-desk .vf-card.vf-kb-focus {
		border-color: var(--vf-accent);
		box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
	}
	.vf-desk-keys { display: flex; align-items: center; gap: 16px; margin-top: 13px; padding: 10px 16px; background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-pill); }
	.vf-desk-keys span { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--vf-font-body); color: var(--vf-text-3); }
	.vf-desk-keys kbd { font: 600 10.5px/1 var(--vf-font-body); color: var(--vf-text-2); background: var(--vf-surface-2); border: 1px solid var(--vf-border); border-radius: 5px; padding: 4px 6px; min-width: 16px; text-align: center; }

	/* Load more stays, but the observer in the JS pre-fetches one batch */
	.vf-desk .vf-loadmore-wrap { padding: 18px 0 0; }
}

/* Wider still: the centre column earns a fifth column of cards. */
@media (min-width: 1680px) {
	.vf-app.vf-desk { --vf-side-w: 268px; --vf-dock-w: 360px; }
	.vf-desk.vf-den-4 .vf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Between 1024 and 1199 the sidebar alone is worth it — no dock. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.vf-app.vf-desk { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
	.vf-desk-dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vf-desk .vf-desk-pop { transition: none; }
}


/* ════════════════════════════════════════════════════════════
   v11.1 — scroll model: composer stays, grid moves
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	/* the sentinel is parked by JS, so app.js never pins the toolbar;
	   position:static is the CSS belt to that suspender */
	#vini-fonts-app .vf-toolbar { position: static; }
	#vini-fonts-app .vf-toolbar.vf-stuck .vf-input {
		height: auto !important; min-height: 66px !important; max-height: none !important;
	}

	/* the two rails are the sticky things; only the centre column scrolls */
	.vf-desk-side,
	.vf-desk-dock {
		position: sticky;
		top: 24px;
		align-self: start;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	/* dock: phones side by side, one horizontal scrollbar */
	.vf-desk-dock .vf-social-overlay {
		position: static; display: block; background: transparent;
		padding: 0; inset: auto;
		/* the base sheet keeps the overlay at opacity:0 until .vf-open —
		   as a docked panel it must simply be visible */
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		z-index: auto;
	}
	.vf-desk-dock .vf-social-modal {
		width: 100%; max-height: none; transform: none;
		border-radius: 14px; box-shadow: none; border: 1px solid var(--vf-border);
	}
	.vf-desk-dock .vf-social-close { display: none; }
	.vf-desk-dock .vf-social-head { padding: 12px 16px 10px; }
	.vf-desk-dock .vf-social-head h3 { font-size: 15px; }
	.vf-desk-dock .vf-social-strip {
		display: flex; overflow-x: auto; gap: 12px;
		padding: 12px 14px; scroll-snap-type: x mandatory;
	}
	.vf-desk-dock .vf-phone {
		flex: 0 0 200px; margin: 0 !important; scroll-snap-align: start;
	}
	.vf-desk-dock .vf-modal-ad { display: none; }
}


/* ════════════════════════════════════════════════════════════
   v11.2 — Discord profile mock-up (global: it also appears as the
   fourth phone in the mobile preview popup)
   ════════════════════════════════════════════════════════════ */
.vf-phone-screen.vf-dc { background: #1e1f22; }
.vf-dc .vf-sp-status { opacity: 0.9; filter: invert(1) hue-rotate(180deg); }
.vf-dc-banner { height: 38px; background: #5865f2; }
.vf-dc-body { padding: 0 10px 12px; margin-top: -16px; }
.vf-dc-av {
	background: #5865f2 !important; color: #fff;
	border: 4px solid #1e1f22; box-sizing: content-box;
}
.vf-dc-card { background: #111214; border-radius: 9px; padding: 10px 11px; margin-top: 7px; }
.vf-dc-name { color: #f2f3f5; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.vf-dc-handle { color: #b5bac1; font-size: 10.5px; margin-top: 1px; }
.vf-dc-sec {
	color: #b5bac1; font-size: 8.5px; font-weight: 700;
	letter-spacing: 0.07em; text-transform: uppercase; margin: 9px 0 3px;
}
.vf-dc-bio { color: #dbdee1; font-size: 11px; line-height: 1.5; word-break: break-word; }
.vf-dc-meta { color: #dbdee1; font-size: 10.5px; }
.vf-dc-btn {
	display: block; margin-top: 10px; padding: 6px 0;
	background: #5865f2; color: #fff; border-radius: 6px;
	font-size: 10.5px; font-weight: 600; text-align: center;
}


/* ════════════════════════════════════════════════════════════
   v11.3 — SELF-CONTAINED SHELL SCROLL
   position:sticky silently dies when any theme ancestor has overflow
   set (the reason v6 needed a fixed-position fallback on this same
   site). So above 1200px nothing sticks at all any more: the shell is
   viewport-height, the composer row is always on screen at its natural
   compact size, the sidebar and the dock are full-height columns, and
   the card grid scrolls inside its own container. Theme-proof.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	.vf-app.vf-desk {
		position: relative;   /* parking anchor for the JS-stuck rails */
		/* v11.7 PAGE-FLOW: the tool is part of the page. No fixed height,
		   no inner scrollers — the grid extends down and the page scrolls,
		   with the content below following naturally. */
		grid-template-rows: auto minmax(0, 1fr);
	}

	.vf-desk .vf-toolbar { grid-column: 2; grid-row: 1; min-width: 0; }

	.vf-desk-main {
		grid-column: 2;
		grid-row: 2;
		min-height: 0;
		padding-bottom: 24px;
	}

	/* the rails: full-height static columns — sticky no longer involved */
	.vf-desk-side,
	.vf-desk-dock {
		position: static;
		grid-row: 1 / -1;
		align-self: start;
		height: auto;
		max-height: none;
		overflow: visible;
	}

	/* clan tag: one compact pill that can never wrap tall */
	.vf-desk-tag { max-height: 58px; }
	.vf-desk-tag-row { flex-wrap: nowrap; }
	.vf-desk-tag-input { width: 52px; }
	.vf-desk-tag-sep { max-width: 58px; }
}


/* ════════════════════════════════════════════════════════════
   v11.3.1 — pinning kill-switch inside the shell
   applyFixed() writes inline position:fixed/left/width when the fixed
   fallback has ever latched; inline loses only to !important. With
   these, no code path can pin or reshape the toolbar above 1200px.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	.vf-app.vf-desk .vf-toolbar {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
	}
	.vf-app.vf-desk .vf-toolbar.vf-stuck .vf-input {
		height: auto !important;
		min-height: 66px !important;
		max-height: none !important;
		font-size: 20px !important;
		white-space: normal !important;
	}
	.vf-app.vf-desk .vf-toolbar.vf-stuck .vf-counter { display: flex !important; }
	.vf-app.vf-desk .vf-toolbar.vf-stuck .vf-toolbar-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
}


/* ════════════════════════════════════════════════════════════
   v11.4 — tool order (row 1: Font Studio + Preview; row 2:
   Decoration + Gaming), overlay [hidden] hardening, load-more
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	.vf-desk .vf-tools-row #vf-studio-btn    { order: 1; }
	.vf-desk .vf-tools-row #vf-social-btn    { order: 2; }
	.vf-desk .vf-tools-row #vf-toggle-deco   { order: 3; }
	.vf-desk .vf-tools-row #vf-toggle-gaming { order: 4; }

	/* This theme resets the [hidden] attribute (the wheel row needed the
	   same guard in 10.1). Every desk/pro overlay must obey it with
	   !important, or an invisible layer can sit over the composer and
	   swallow the Decoration / Gaming clicks. */
	.vf-app.vf-desk [hidden] { display: none !important; }
	.vf-desk-compose { position: relative; z-index: 5; }

	/* load-more inside the inner scroller: always a real, visible button;
	   with endless scrolling on it is auto-clicked before it is reached */
	.vf-desk .vf-loadmore-wrap { padding: 16px 0 4px; }
	.vf-desk .vf-loadmore-btn {
		min-height: 40px; padding: 0 22px; border-radius: 999px;
		font-size: 13.5px;
	}
}




/* v11.6 — dock ad: the always-visible placement */
@media (min-width: 1200px) {
	.vf-desk-dock .vf-desk-dock-ad {
		margin-top: 14px;
		min-height: 250px;
		border-radius: 14px;
	}
}


/* ════════════════════════════════════════════════════════════
   v11.7 — dock order, merged chooser, compact composer, inline row
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	/* dock: tabs (with Dark), ad, preview — heading gone, ad on top */
	.vf-desk-dock .vf-social-head { display: none; }
	.vf-desk-dock .vf-desk-dock-ad { margin: 10px 0 2px; }
	.vf-desk-dock .vf-desk-seg .vf-pro-dark { margin-left: auto; }
	.vf-desk-dock .vf-desk-seg .vf-pro-dark svg { width: 13px; height: 13px; }

	/* the IG/FB Preview button hosts the destination menu */
	.vf-desk-target-on-social { position: relative; order: 2; display: inline-flex; margin: 0; }
	.vf-desk-target-on-social > .vf-desk-target-btn { display: none; }
	.vf-desk-target-on-social .vf-desk-target-menu { left: 0; right: auto; min-width: 280px; }

	/* filters + density share one line now the pill is gone */
	.vf-desk-den { margin-left: auto; }

	/* composer: minimum breathing room */
	.vf-desk-compose { padding: 12px 14px 10px; }
	.vf-desk-modes { margin: 0 0 8px; }
	.vf-desk .vf-input-wrapper { gap: 8px; }
	.vf-desk .vf-input {
		min-height: 54px !important;
		font-size: 19px;
		padding: 12px 46px 12px 14px;
	}
	.vf-desk-tag { max-height: 52px; padding: 5px 10px; }
	.vf-desk .vf-tools-row { gap: 6px 8px; margin-top: 8px; }
	.vf-desk .vf-tools-row .vf-tool { min-height: 36px; padding: 0 12px; }
	.vf-desk .vf-toolbar-inner { padding-top: 0; padding-bottom: 0; }
	.vf-desk-main { padding-top: 12px; }
}


/* v11.7.2 — pinned rails scroll inside: slim, quiet scrollbars */
@media (min-width: 1200px) {
	.vf-desk-side, .vf-desk-dock { scrollbar-width: thin; overscroll-behavior: contain; }
	.vf-desk-side::-webkit-scrollbar, .vf-desk-dock::-webkit-scrollbar { width: 6px; }
	.vf-desk-side::-webkit-scrollbar-thumb, .vf-desk-dock::-webkit-scrollbar-thumb {
		background: var(--vf-text-light); border-radius: 100px;
	}
}


/* v11.7.3 — the destination menu was landing over the dock: the core
   toolbar's backdrop-filter makes it the CONTAINING BLOCK for
   position:fixed descendants, so the menu's viewport coordinates were
   re-based to the toolbar. The blur exists for the pinned phone bar,
   which never pins on desktop — removing it in the shell restores true
   viewport positioning for the floating menu. */
@media (min-width: 1200px) {
	.vf-app.vf-desk .vf-toolbar {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}


/* v11.7.6 — responsive AdSense units need a MEASURABLE width the moment
   the push is processed. The slot centers its content (flex), so an
   empty <ins> shrinks to zero and a data-ad-format="auto" unit dies
   with "No slot size for availableWidth=0". Grid slots push during
   core boot — BEFORE the shell adds .vf-desk — so this rule must be
   static and unscoped: every viewport, every moment. (Also fixes the
   same trap for responsive units on phones.) */
.vf-app .vf-ad-slot ins.adsbygoogle {
	display: block;
	width: 100%;
	min-width: 250px;
}

/* v11.7.6 — no visible ad labels ("Advertisement" / "Ad slot N"),
   per site owner's choice; aria labels remain for screen readers */
.vf-app .vf-ad-slot::before,
.vf-app .vf-ad-slot::after { content: none !important; }
.vf-app .vf-ad-slot { min-height: 0; }
.vf-desk-dock-ad::before { content: none !important; }
.vf-app .vf-ad-empty { display: none !important; }