.ffqs-mode-switch {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 3px;
	margin: 0 0 1rem;
	padding: 3px;
	border: 1px solid var(--ff-border);
	border-radius: 10px;
	background: #f7f7f4;
}
.ffqs-mode {
	min-height: 40px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--ff-muted);
	font-size: .78rem;
	font-weight: 800;
}
.ffqs-mode.is-active { background: var(--ff-brand); color: #fff; }

.ffqs-method-note {
	margin: 0 1.1rem 1rem;
	padding: .75rem .85rem;
	border-left: 4px solid var(--ff-brand);
	border-radius: 0 9px 9px 0;
	background: var(--ff-soft-green);
}
.ffqs-method-note strong { display: block; font-size: .78rem; }
.ffqs-method-note p { margin: .2rem 0 0; color: var(--ff-muted); font-size: .7rem; line-height: 1.4; }

.ffqs-detail {
	margin: 0 1rem 1rem;
	padding: .85rem;
	border: 1px solid #dfe3de;
	border-radius: 12px;
	background: #f3f6f3;
}
.ffqs-detail h3 { margin: 0 0 .65rem; font-family: var(--ff-sans); font-size: .82rem; }
.ffqs-detail-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: .45rem;
}
.ffqs-detail-grid > div {
	padding: .65rem;
	border-radius: 8px;
	background: #fff;
}
.ffqs-detail-grid span,
.ffqs-detail-grid strong { display: block; }
.ffqs-detail-grid span { color: var(--ff-muted); font-size: .65rem; font-weight: 750; }
.ffqs-detail-grid strong { margin-top: .16rem; color: var(--ff-ink); font-size: .76rem; }
.ffqs-detail > p { margin: .65rem 0 0; color: var(--ff-muted); font-size: .7rem; line-height: 1.45; }

.ffqs-stale, .ffqs-error {
	margin: .8rem 1rem 1rem;
	padding: .7rem .8rem;
	border-radius: 9px;
	font-size: .73rem;
}
.ffqs-stale { background: #fff3df; color: #704a10; }
.ffqs-stale strong { margin-right: .35rem; }
.ffqs-error { border: 1px solid rgba(185,79,50,.22); background: #fff0eb; color: #8f3522; }

@media (max-width: 760px) {
	.ffqs-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.ffqs-mode-switch { grid-template-columns: 1fr; }
}


.ffqs-lower-grid { margin-top: 1rem; }
.ffqs-panel__head--accent {
	background: var(--ff-accent);
	color: #fff;
}
.ffqs-panel__head--accent .qbc-panel__eyebrow,
.ffqs-panel__head--accent h2 { color: #fff; }
.ffqs-panel__head--accent .qbc-step {
	background: rgba(255,255,255,.18);
	color: #fff;
}
.ffqs-plan-body {
	display: grid;
	grid-template-columns: minmax(220px,.85fr) minmax(0,1.15fr);
	gap: 1rem;
	padding: 1rem 1.1rem 1.15rem;
}
.ffqs-plan-visual {
	display: grid;
	place-items: center;
	min-height: 210px;
	padding: 1rem;
	border: 1px solid #ddd6ca;
	background: #fbf6ec;
}
.ffqs-plan-quilt {
	width: min(100%,260px);
	aspect-ratio: 5/4;
	padding: 8px;
	border: 5px solid var(--ff-brand);
	background: #fff;
}
.ffqs-plan-grid {
	display: grid;
	gap: 3px;
	width: 100%;
	height: 100%;
}
.ffqs-plan-grid span { min-width: 0; min-height: 0; background: #e7c7b9; }
.ffqs-plan-grid span:nth-child(3n+2) { background: #b9d4ca; }
.ffqs-plan-grid span:nth-child(4n) { background: #e8dfc4; }
.ffqs-plan-copy > strong { display: block; font-family: var(--ff-serif); font-size: 1.05rem; }
.ffqs-plan-copy > p { margin: .3rem 0 .8rem; color: var(--ff-muted); font-size: .73rem; line-height: 1.45; }
.ffqs-plan-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.ffqs-plan-stats > div {
	padding: .65rem;
	border: 1px solid #e1e2de;
	border-radius: 8px;
	background: #fff;
}
.ffqs-plan-stats span,
.ffqs-plan-stats strong { display: block; }
.ffqs-plan-stats span { color: var(--ff-muted); font-size: .65rem; }
.ffqs-plan-stats strong { margin-top: .18rem; font-size: .76rem; color: var(--ff-ink); }
.ffqs-summary-list { padding: 1rem 1.1rem 1.15rem; }
.ffqs-summary-list > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .78rem 0;
	border-bottom: 1px solid #e5e5e0;
}
.ffqs-summary-list span { color: var(--ff-muted); font-size: .72rem; }
.ffqs-summary-list strong { color: var(--ff-ink); text-align: right; font-size: .76rem; }

@media (max-width:760px) {
	.ffqs-plan-body { grid-template-columns: 1fr; }
}
@media (max-width:560px) {
	.ffqs-plan-stats { grid-template-columns: 1fr; }
}