/* Services (/services/): the guided finder in the page head (finder.js), tried first as the draft /services-finder/.
   Tabs (questions or ready-made situations), one question at a time, then the setup in up to three sizes. */

.vs-f { align-self: stretch; display: flex; flex-direction: column; gap: 20px; margin-top: clamp(8px, 2vw, 24px); border-top: 1px solid var(--line); padding-top: 20px; }
.vs-f__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.vs-f__title { margin: 0; }
.vs-f__tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.vs-f__tabs[hidden] { display: none; }
.vs-f__tab { cursor: pointer; min-height: 40px; padding: 8px 18px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-soft); white-space: nowrap; transition: background .25s, color .25s; }
.vs-f__tab:hover { color: var(--ink); }
.vs-f__tab[aria-selected="true"] { background: var(--on-dark); color: var(--hero-dark); }
.vs-f__panel[hidden] { display: none; }
/* The situations panel reuses the rows from /services/ without their own top rule. */
.vs-f-sits { margin-top: 0; border-top: 0; padding-top: 0; }

/* A question */
.vs-f-step { display: flex; flex-direction: column; gap: 12px; }
.vs-f-step[hidden] { display: none; }
.vs-f-step__meta { display: flex; align-items: center; gap: 16px; }
.vs-f-progress { display: flex; gap: 6px; }
.vs-f-progress i { width: 28px; height: 3px; border-radius: 2px; background: var(--line); }
.vs-f-progress i.is-on { background: var(--accent); }
.vs-f-step__q { margin: 4px 0 0; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; color: var(--ink); text-wrap: balance; }
.vs-f-step__q:focus { outline: none; }
.vs-f-step__hint { margin: 0; font-weight: 400; }

/* Options: cards with a line under the label, or shorter tiles when the options have no line. */
.vs-f-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 8px; }
.vs-f-opts--short { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.vs-f-opt { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 64px; padding: 16px 48px 16px 18px; border: 1px solid rgba(240, 240, 240, .22); border-radius: 14px; background: transparent; color: var(--ink); text-align: left; font: inherit; transition: border-color .25s, background .25s, color .25s; }
.vs-f-opt:hover { border-color: var(--on-dark); }
.vs-f-opt__label { font-size: 18px; line-height: 1.3; }
.vs-f-opt__line { color: var(--muted); font-weight: 400; }
.vs-f-opt__tick { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; padding: 3px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(240, 240, 240, .3); color: transparent; transition: background .25s, border-color .25s, color .25s; }
.vs-f-opt[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.vs-f-opt[aria-pressed="true"] .vs-f-opt__tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vs-f-step__nav { display: flex; justify-content: flex-end; align-items: center; gap: 12px 20px; margin-top: 8px; }
.vs-f-step__nav [data-f-back] { margin-right: auto; padding-left: 0; }

/* The result */
.vs-f-result { display: flex; flex-direction: column; gap: 18px; }
.vs-f-result[hidden] { display: none; }
.vs-f-result__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; }
.vs-f-result__links { display: flex; flex-wrap: wrap; }
.vs-f-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.vs-f-sizes[hidden] { display: none; }
.vs-f-size { cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 18px; border: 1px solid rgba(240, 240, 240, .22); border-radius: 14px; background: transparent; color: var(--ink); text-align: left; font: inherit; transition: border-color .25s, background .25s, color .25s; }
.vs-f-size:hover { border-color: var(--on-dark); }
.vs-f-size__name { font-size: 20px; line-height: 1.2; }
.vs-f-size__meta { color: var(--muted); }
.vs-f-size[aria-checked="true"] { background: var(--on-dark); border-color: var(--on-dark); color: var(--hero-dark); }
.vs-f-size[aria-checked="true"] .vs-f-size__meta { color: color-mix(in srgb, var(--hero-dark) 65%, transparent); }

.vs-f-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.vs-f-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px clamp(12px, 2vw, 24px); align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); transition: opacity .25s; }
.vs-f-item:not(.is-in) { opacity: .45; }
.vs-f-item__num { color: var(--label); }
.vs-f-item__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.vs-f-item__name { flex: 0 1 auto; font-size: 20px; line-height: 1.25; color: var(--ink); text-decoration: none; }
.vs-f-item.is-in .vs-f-item__name { color: var(--accent); }
.vs-f-item__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.vs-f-item__why { flex: 1 1 320px; color: var(--ink-soft); font-weight: 400; }
.vs-f-item__tag { color: var(--muted); white-space: nowrap; }
.vs-f-item.is-in .vs-f-item__tag { color: var(--accent-2); }
.vs-f-more { margin: 0; font-weight: 400; }
.vs-f-result__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 54px; }
.vs-f-result__act .pm-btn[hidden] { display: none; }
.vs-f-used { margin: 0; color: var(--ink-soft); font-weight: 400; }
.vs-f-used:empty { display: none; }
.vs-f-used a { color: var(--accent); }

@media (max-width: 760px) {
	.vs-f__tabs { width: 100%; box-sizing: border-box; }
	.vs-f__tab { flex: 1; padding: 8px 10px; white-space: normal; line-height: 1.25; }
	.vs-f-opt { min-height: 0; padding: 14px 44px 14px 16px; }
	.vs-f-opt__label { font-size: 17px; }
	/* The sizes as short rows: name, then the count and scope on the right. */
	.vs-f-sizes { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.vs-f-size { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; }
	.vs-f-size__name { font-size: 16px; }
	.vs-f-size__meta { white-space: nowrap; font-size: 11px; }
	.vs-f-item { grid-template-columns: 28px minmax(0, 1fr); }
	.vs-f-item.is-in .vs-f-item__tag { display: none; }
	.vs-f-item__tag { grid-column: 2; }
	.vs-f-step__nav .pm-btn { flex: 1; justify-content: center; }
}