/* ==========================================================================
   Vera Focus deck (Plan N 15 / E3; home-revamp.md §13.3). Linked by Main::headBase() after markdown.css.
   Vera\VeraDeckRender::veraDeckHtml() renders every card; CSS shows only the picked one (.vera-deck-card.is-on) and
   veraDeck.js (E5) moves .is-on. The deck draws no outer frame: its host (the Home Focus CardV1, file 20's
   Recommendation page) owns the card chrome.
   Colours only through the framework kit tokens (--ffo*, light and dark values in ptbThemes.css) with the kit's own
   fallbacks; tones come from the kit .ffo-tone-* classes (UiV1::chip / UiV1::tag). RSF sets font-size:0 on body, so
   every text element sets its own font-size. No italics, no webfonts, no border-left accents.
   ========================================================================== */

.vera-deck {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	font-size: 13px;
	font-style: normal;
	text-align: left;
	color: var(--ffoText, var(--rmc-text, #f6f6f6));
	overflow-wrap: anywhere;
}
.vera-deck:focus { outline: none; }
.vera-deck:focus-visible { outline: 1px solid var(--ffoToneLeo, var(--rmc-leo, #5b8def)); outline-offset: 2px; border-radius: 6px; }
.vera-deck.is-empty .ffo-empty { font-size: 13px; }

/* ---- bar: dots, n of N, set aside, prev / next ------------------------------------------------------ */
.vera-deck-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 10px;
	padding: 0 0 8px;
	font-size: 12.5px;
	color: var(--ffoMuted, var(--rmc-muted, #a3a3a3));
	border-bottom: 1px solid var(--ffoRowLine, var(--rmc-border, rgba(255, 255, 255, .08)));
}
.vera-deck-dots { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vera-deck-dots i {
	display: inline-block;
	width: 16px;
	height: 4px;
	border-radius: 2px;
	font-size: 0;
	font-style: normal;
	background: var(--ffoLine, var(--rmc-border2, rgba(255, 255, 255, .14)));
}
.vera-deck-dots i.is-open { background: var(--ffoToneWarn, var(--rmc-amber, #e8b04a)); }
.vera-deck-dots i.is-on { background: var(--ffoToneLeo, var(--rmc-leo, #5b8def)); }
.vera-deck-count { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vera-deck-count b { font-size: 12.5px; font-weight: 700; color: var(--ffoText, var(--rmc-text, #f6f6f6)); }
.vera-deck-sp { flex: 1 1 auto; }
.vera-deck-steps { display: inline-flex; gap: 4px; }

/* ---- body: the stage, and the ranked queue (home, 3 or more cards) ---------------------------------
   row-reverse + wrap: the queue (second in the markup) sits left of the stage when there is room and drops
   below it in a narrow host, with no media query and no sideways scroll. */
.vera-deck-body {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.vera-deck-stage { flex: 3 1 280px; min-width: 0; }
.vera-deck-qw { flex: 1 1 180px; min-width: 0; max-width: 100%; }
.vera-deck-qh {
	margin: 0 0 4px;
	padding: 0 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ffoMuted, var(--rmc-muted, #a3a3a3));
}
.vera-deck-q { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vera-deck-q li { margin: 0; padding: 0; font-size: 12.5px; list-style: none; }
.vera-deck-qi {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: baseline;
	gap: 6px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 5px 8px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	text-align: left;
	color: var(--ffoText2, var(--rmc-text2, #d8d8d8));
	background: transparent;
	border: 1px solid var(--ffoLine, var(--rmc-border2, rgba(255, 255, 255, .14)));
	border-radius: 8px;
	cursor: pointer;
}
.vera-deck-qi:hover { color: var(--ffoText, var(--rmc-text, #f6f6f6)); border-color: var(--ffoBtnHoverLine, rgba(127, 127, 127, .4)); }
.vera-deck-qi:focus-visible { outline: 1px solid var(--ffoToneLeo, var(--rmc-leo, #5b8def)); outline-offset: 1px; }
.vera-deck-qi.is-on {
	color: var(--ffoText, var(--rmc-text, #f6f6f6));
	background: var(--ffoToneLeoSoft, var(--rmc-leo-soft, rgba(91, 141, 239, .14)));
	border-color: var(--ffoToneLeoLine, var(--rmc-leo-line, rgba(91, 141, 239, .45)));
}
.vera-deck-qn { flex: 0 0 auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ffoMuted, var(--rmc-muted, #a3a3a3)); }
.vera-deck-qt { min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }

/* ---- cards: only the picked one shows --------------------------------------------------------------- */
.vera-deck-card { display: none; min-width: 0; margin: 0; padding: 0; }
.vera-deck-card.is-on { display: block; }
.vera-deck-cb { min-width: 0; font-size: 13px; }
.vera-deck-kick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--ffoMuted, var(--rmc-muted, #a3a3a3));
}
.vera-deck-ttl {
	margin: 0 0 4px;
	padding: 0;
	font-size: 15.5px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ffoText, var(--rmc-text, #f6f6f6));
}
.vera-deck-text {
	margin: 0 0 10px;
	padding: 0;
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
	color: var(--ffoText2, var(--rmc-text2, #d8d8d8));
}
.vera-deck-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vera-deck-btn { font-family: inherit; }
.vera-deck-btn.vera-deck-ask {
	color: var(--ffoToneLeo, var(--rmc-leo, #5b8def));
	border-color: var(--ffoToneLeoLine, var(--rmc-leo-line, rgba(91, 141, 239, .45)));
}
.vera-deck-btn.vera-deck-ask:hover {
	color: var(--ffoToneLeo, var(--rmc-leo, #5b8def));
	background: var(--ffoToneLeoSoft, var(--rmc-leo-soft, rgba(91, 141, 239, .14)));
	border-color: var(--ffoToneLeo, var(--rmc-leo, #5b8def));
}
.vera-deck-kbd {
	display: inline-block;
	margin: 0 0 0 2px;
	padding: 0 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 600;
	font-style: normal;
	line-height: 14px;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 3px;
	opacity: .75;
}

/* ---- phones: no queue, no key hints, full-width buttons; nothing scrolls sideways at 390px ------------ */
@media screen and (max-width: 760px) {
	.vera-deck-qw { display: none; }
	.vera-deck-kbd { display: none; }
	.vera-deck-stage { flex-basis: 100%; }
	.vera-deck-ttl { font-size: 14.5px; }
	.vera-deck-acts .vera-deck-btn { flex: 1 1 auto; }
}