/**
 * Vini Fonts — desktop intent layer (Phase 2)
 * ------------------------------------------------------------------
 * Loads after vini-fonts-desktop.css and only styles nodes that layer
 * creates. Every value comes from the existing --vf-* tokens.
 */

@media (min-width: 1200px) {

	/* ══ destination selector ════════════════════════════════════ */
	.vf-desk-target { position: relative; flex: none; }

	.vf-desk-target-btn {
		display: flex; align-items: center; gap: 8px;
		height: 36px; padding: 0 10px 0 13px;
		border: 0; border-radius: var(--vf-radius-pill);
		background: var(--vf-text); color: #fff;
		cursor: pointer;
	}
	.vf-desk-target-btn:hover  { background: #1e293b; }
	.vf-desk-target-btn:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 2px; }
	.vf-desk-target-kicker {
		font: 700 8.5px/1 var(--vf-font-body);
		letter-spacing: .12em; text-transform: uppercase;
		color: rgba(255, 255, 255, .55);
	}
	.vf-desk-target-cur { font: 600 12.5px/1 var(--vf-font-body); }
	.vf-desk-target-lim {
		font: 600 10.5px/1 var(--vf-font-body);
		background: rgba(255, 255, 255, .16);
		border-radius: var(--vf-radius-pill);
		padding: 5px 8px;
	}

	.vf-desk-target-menu {
		position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
		min-width: 236px; padding: 6px;
		background: var(--vf-surface);
		border: 1px solid var(--vf-border);
		border-radius: var(--vf-radius);
		box-shadow: var(--vf-shadow-lg);
	}
	.vf-desk-target-menu[hidden] { display: none; }
	.vf-desk-target-menu button {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: 100%; padding: 8px 10px;
		border: 0; border-radius: var(--vf-radius-sm); background: none;
		font: 500 12.5px/1 var(--vf-font-body); color: var(--vf-text-2);
		cursor: pointer; text-align: left;
	}
	.vf-desk-target-menu button em {
		font-style: normal;
		font: 600 10.5px/1 var(--vf-font-body); color: var(--vf-text-light);
	}
	.vf-desk-target-menu button:hover { background: var(--vf-surface-2); color: var(--vf-text); }
	.vf-desk-target-menu button[aria-pressed="true"] {
		background: rgba(99, 102, 241, .1); color: #4338ca; font-weight: 600;
	}
	.vf-desk-target-menu button[aria-pressed="true"] em { color: var(--vf-accent); }

	/* ══ the two filters ═════════════════════════════════════════ */
	.vf-desk-filters { display: flex; align-items: center; gap: 8px; }
	.vf-desk-filter {
		display: flex; align-items: center; gap: 7px;
		height: 34px; padding: 0 13px;
		border: 1px solid var(--vf-border); border-radius: var(--vf-radius-pill);
		background: var(--vf-surface);
		font: 600 12px/1 var(--vf-font-body); color: var(--vf-text-2);
		cursor: pointer;
	}
	.vf-desk-filter:hover { border-color: var(--vf-border-2); color: var(--vf-text); }
	.vf-desk-filter:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 2px; }
	.vf-desk-filter[aria-pressed="true"] {
		background: rgba(16, 185, 129, .1);
		border-color: rgba(16, 185, 129, .32);
		color: #047857;
	}

	/* the filters work by hiding, so the grid never reflows its columns */
	.vf-desk.vf-only-safe .vf-card:not(.vf-is-safe):not(.vf-ad-slot),
	.vf-desk.vf-only-fits .vf-card:not(.vf-is-fits):not(.vf-ad-slot),
	.vf-desk .vf-card.vf-desk-hidden { display: none; }

	/* ══ clan / brand tag ════════════════════════════════════════ */
	.vf-desk-tag {
		display: flex; flex-direction: column; gap: 3px;
		flex: none; width: 168px;
		padding: 7px 11px;
		background: var(--vf-surface-2);
		border: 1px dashed var(--vf-border);
		border-radius: var(--vf-radius);
	}
	.vf-desk-tag-kicker {
		font: 700 8.5px/1 var(--vf-font-body);
		letter-spacing: .12em; text-transform: uppercase;
		color: var(--vf-text-3);
	}
	.vf-desk-tag-row { display: flex; align-items: center; gap: 6px; }
	.vf-desk-tag-input {
		flex: 1; min-width: 0; width: 100%;
		border: 0; background: none; outline: none; padding: 0;
		font-family: var(--vf-font-glyph);
		font-size: 15px; line-height: 1.3; color: var(--vf-text);
	}
	.vf-desk-tag-input::placeholder { color: var(--vf-text-light); }
	.vf-desk-tag-sep {
		flex: none; border: 0; background: none; outline: none;
		font: 600 11px/1 var(--vf-font-body); color: var(--vf-text-3);
		cursor: pointer;
	}

	/* ══ per-card signals ════════════════════════════════════════ */
	.vf-desk .vf-card-rail-label { flex-wrap: wrap; white-space: normal; }
	.vf-desk-sig { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }

	.vf-desk-chip {
		font: 600 10.5px/1 var(--vf-font-body);
		white-space: nowrap;
	}
	.vf-desk-chip-ok   { color: #059669; }
	.vf-desk-chip-over { color: #ef4444; }
	.vf-desk-chip-warn { color: #b45309; }
	.vf-desk-chip-bad  { color: #dc2626; }
	.vf-desk-chip-warn::before,
	.vf-desk-chip-bad::before  { content: "\25B3 "; }
	.vf-desk-chip-ok::before   { content: "\2713 "; }
	.vf-desk-chip-over::before { content: "\25B3 "; }
	/* the length chip leads, so it keeps its own line on a narrow card */
	.vf-desk-sig .vf-desk-chip:first-child { flex: 1 0 100%; }

	.vf-desk.vf-den-4 .vf-desk-chip { font-size: 10px; }
	.vf-desk.vf-den-list .vf-desk-sig { flex: 0 0 auto; }

	.vf-desk-plain {
		display: grid; place-items: center;
		width: 30px; height: 30px; flex: none;
		border: 0; border-radius: var(--vf-radius-sm);
		background: var(--vf-surface-2);
		font: 700 10.5px/1 var(--vf-font-body); color: var(--vf-text-2);
		cursor: pointer;
	}
	.vf-desk-plain:hover { background: rgba(99, 102, 241, .1); color: var(--vf-accent); }
	.vf-desk-plain:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 2px; }

	/* ══ ⌘K palette ══════════════════════════════════════════════ */
	.vf-desk-palette {
		position: fixed; inset: 0; z-index: 100000;
		display: grid; place-items: start center;
		padding-top: 12vh;
		background: rgba(15, 23, 42, .45);
		backdrop-filter: blur(2px);
	}
	.vf-desk-palette[hidden] { display: none; }

	.vf-desk-palette-box {
		width: min(560px, calc(100vw - 40px));
		background: var(--vf-surface);
		border-radius: var(--vf-radius-lg);
		box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
		overflow: hidden;
	}
	.vf-desk-palette-head {
		display: flex; align-items: center; gap: 10px;
		padding: 13px 15px;
		border-bottom: 1px solid var(--vf-border);
		color: var(--vf-text-3);
	}
	.vf-desk-palette-head input {
		flex: 1; min-width: 0; border: 0; background: none; outline: none;
		font: 400 15px/1 var(--vf-font-body); color: var(--vf-text);
	}
	.vf-desk-palette-head kbd {
		font: 600 10px/1 var(--vf-font-body); color: var(--vf-text-3);
		background: var(--vf-surface-2); border-radius: 5px; padding: 4px 6px;
	}
	.vf-desk-palette-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
	.vf-desk-palette-group {
		display: block; padding: 8px 10px 4px;
		font: 700 9.5px/1 var(--vf-font-body);
		letter-spacing: .14em; text-transform: uppercase;
		color: var(--vf-text-3);
	}
	.vf-desk-palette-row {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: 100%; padding: 9px 10px;
		border: 0; border-radius: var(--vf-radius-sm); background: none;
		font: 500 13px/1 var(--vf-font-body); color: var(--vf-text-2);
		cursor: pointer; text-align: left;
	}
	.vf-desk-palette-row em { font-style: normal; font: 600 10.5px/1 var(--vf-font-body); color: var(--vf-text-light); }
	.vf-desk-palette-row:hover { background: var(--vf-surface-2); color: var(--vf-text); }
	.vf-desk-palette-row[aria-selected="true"] {
		background: rgba(99, 102, 241, .1); color: #4338ca; font-weight: 600;
	}

	/* while searching, the sidebar drops its group rhythm */
	.vf-desk.vf-desk-searching .vf-desk-side .vf-pill[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vf-desk-palette { backdrop-filter: none; }
}


/* ════════════════════════════════════════════════════════════
   v11.1 — compact destination row + inline clan tag
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
	/* "Pasting into · Safe glyphs · Fits the limit" as one pill row on
	   the same scale as the tools row */
	.vf-results-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
	.vf-desk-target { margin: 0; }
	.vf-desk-target-btn {
		height: 34px; padding: 0 12px; border-radius: 999px;
		font-size: 12.5px; gap: 7px;
	}
	.vf-desk-target-kicker { font-size: 8.5px; letter-spacing: 0.12em; }
	.vf-desk-filters { display: flex; gap: 8px; margin: 0; }
	.vf-desk-filter { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }

	/* clan / brand tag: compact, inline, first in the input row */
	.vf-input-wrapper { display: flex; align-items: stretch; gap: 10px; }
	.vf-input-wrapper .vf-input { flex: 1 1 auto; min-width: 0; }
	.vf-desk-tag {
		order: -1; flex: 0 0 auto;
		display: flex; flex-direction: column; justify-content: center; gap: 3px;
		margin: 0; padding: 7px 12px;
		border: 1.5px dashed var(--vf-border-2); border-radius: 14px;
		background: transparent;
	}
	.vf-desk-tag-kicker { font-size: 8px; letter-spacing: 0.14em; white-space: nowrap; }
	.vf-desk-tag-row { display: flex; align-items: center; gap: 4px; margin: 0; }
	.vf-desk-tag-input { width: 62px; border: 0; background: transparent; font-size: 14px; padding: 2px 0; }
	.vf-desk-tag-sep { border: 0; background: transparent; font-size: 11px; max-width: 64px; }
}


/* v11.5 — active-filter results banner */
@media (min-width: 1200px) {
	.vf-desk-filter-note {
		flex: 1 0 100%;
		display: flex; align-items: center; gap: 12px;
		margin-top: 2px; padding: 8px 14px;
		border-radius: 10px;
		background: rgba(99, 102, 241, 0.07);
		border: 1px dashed rgba(99, 102, 241, 0.35);
		font: 500 12.5px/1.4 var(--vf-font-body);
		color: var(--vf-text-2);
	}
	.vf-desk-filter-note[hidden] { display: none !important; }
	.vf-desk-filter-clear {
		margin-left: auto; padding: 5px 12px;
		border: 0; border-radius: 999px; cursor: pointer;
		background: var(--vf-accent); color: #fff;
		font: 600 11.5px/1 var(--vf-font-body);
	}
}