/* styles for the results screen only (prefix .v-results-) */

/* calm page: more air between sections, the verdict is the hero */
.v-results-page { gap: 52px; }
.v-results-page > .v-verdict { padding: 18px 0 8px; gap: 14px; }
.v-results-page .v-verdict-t { font-size: 40px; line-height: 1.06; max-width: 14ch; }
.v-results-page .v-sec { gap: 12px; }

/* verdict hero: Why? sits under the big answer */
.v-results-why-link { align-self: flex-start; margin-top: 2px; }
.v-results-why { margin-top: 2px; }

/* recall row: the count is the only red on the page besides the verdict */
.v-results-recall-row .v-row-ic { color: var(--v-crit); }
.v-results-recall-row .v-row-s { color: var(--v-crit); }
.v-results-recall { margin-top: -24px; }

/* "Edit" next to a section title */
.v-results-edit { font-size: 15px; }

/* warnings and footnotes in plain text, no boxes */
.v-results-warn { font-size: 15px; line-height: 1.45; color: var(--v-warn); }

/* Do this first: numbered, tickable steps */
.v-results-step { align-items: flex-start; }
.v-results-step .v-row-t { font-weight: 400; line-height: 1.4; transition: color 0.2s; }
.v-results-step .v-check { margin-top: 1px; }
.v-results-step[aria-pressed="true"] .v-row-t { color: var(--v-text-3); text-decoration: line-through; text-decoration-color: var(--v-text-3); }
.v-results-num {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center;
  font: 650 17px/1 var(--v-display); color: var(--v-text-2); font-variant-numeric: tabular-nums;
}
.v-results-bullet { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.v-results-bullet::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--v-text-3); }
.v-results-more { align-self: flex-start; margin-top: 4px; }

/* Pattern spotted: plain text blocks */
.v-results-pattern { display: flex; flex-direction: column; gap: 6px; }
.v-results-pattern + .v-results-pattern { margin-top: 18px; }
.v-results-sub-h { font-size: 19px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; }
.v-results-hits { font-size: 14px; color: var(--v-text-3); }

/* Likely causes: big % lead, thin meter under the title */
.v-results-causes { --v-row-inset: 70px; }
.v-results-cause { align-items: flex-start; padding: 16px 0; }
.v-results-cause .v-big-num { color: var(--v-text-2); padding-top: 1px; }
.v-results-cause .v-big-num.v-results-top { color: var(--v-text); }
.v-results-cause .v-chev { align-self: center; }
.v-results-cause .v-meter { margin-top: 8px; max-width: 220px; }
.v-results-cause:not(:first-child) .v-meter i { opacity: 0.55; }

/* When to call a pro: calm text list with hairlines */
.v-results-pro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v-results-pro li { position: relative; padding: 12px 0; font-size: 15px; line-height: 1.45; color: var(--v-text-2); }
.v-results-pro li + li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--v-sep); transform: scaleY(0.6); }
.v-results-pro li.v-results-pro-now { color: var(--v-text); }

/* end of page: the pro row, two quiet actions, the short disclaimer */
.v-results-end { display: flex; flex-direction: column; gap: 24px; }
.v-results-pro-row .v-row-s { color: var(--v-warn); }
.v-results-footer { display: flex; flex-wrap: wrap; gap: 10px; }
.v-results-footer .v-btn { flex: 1 1 140px; }

/* sheets (code meaning, cause detail) */
.v-results-sheet { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.v-results-sheet-head { display: flex; flex-direction: column; gap: 6px; }
.v-results-sheet-t { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }
.v-results-sev { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--v-text-2); }
.v-results-lede { font-size: 17px; color: var(--v-text-2); }
.v-results-lede strong { font: 650 28px/1 var(--v-display); letter-spacing: -0.03em; color: var(--v-text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.v-results-block { display: flex; flex-direction: column; gap: 6px; }
.v-results-sheet .v-row-v { max-width: 60%; color: var(--v-text-2); }
.v-results-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }