/* CV Mojo v3 - free CV check results: "Fix my CV for me" and "Email me my results" (2026-10-25).
   Drawn by assets/site/checker.js; loaded by site_checker_results() (includes/site/pages/_checker.php)
   only when one of them is switched on. v3 tokens (assets/site/v3/v3.css) with fallbacks, so the
   ?v3=0 opt-out still reads well. Rules kept: no yellow text on navy (yellow only as a small badge or
   a placeholder chip), tangerine carries navy text, warm paper surfaces. */

.qc-extras { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 24px; }
.qc-extras--one { grid-template-columns: minmax(0, 1fr); }
.qc-x-card { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 28px 30px 26px; color: var(--text, #1D1A26); background: var(--paper, #FFFDF8); border-radius: 24px; }
.qc-x-card h2 { margin: 0; padding-right: 64px; font-family: var(--display, 'Arial Narrow', Impact, sans-serif); font-size: 2.3rem; font-weight: 400; line-height: .95; text-transform: uppercase; color: var(--navy, #1E2A5A); }
.qc-x-card p { margin: 0; font-size: 16px; line-height: 1.55; }
.qc-x-card .btn { align-self: flex-start; white-space: normal; text-align: center; }
.qc-x-fine { font-size: 14px !important; color: var(--grey, #5D5869); }
.qc-x-fine a { font-weight: 800; color: inherit; text-decoration: underline; text-decoration-color: var(--sun, #FFC93C); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.qc-x-tag { position: absolute; top: -18px; right: 26px; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; padding-top: 4px; font-family: var(--display, 'Arial Narrow', Impact, sans-serif); font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--navy, #1E2A5A); isolation: isolate; transform: rotate(10deg); }
.qc-x-tag::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun, #FFC93C); border-radius: 50%; -webkit-mask: var(--v-blob-c) center / 100% 100% no-repeat; mask: var(--v-blob-c) center / 100% 100% no-repeat; }

/* Fix my CV for me: the navy card. */
.qc-fixme { color: var(--cream, #FFF6E0); background: var(--navy, #1E2A5A); }
.qc-fixme h2 { color: var(--cream, #FFF6E0); }
.qc-fixme p { color: var(--on-navy, #D9E1F2); }
.qc-x-honest { padding: 12px 14px; color: var(--cream, #FFF6E0) !important; background: rgba(255, 246, 224, .1); border-radius: 16px; }
mark.qc-ph { padding: 0 5px; font-weight: 800; color: var(--navy, #1E2A5A); background: #FFE59A; border-radius: 6px; box-shadow: inset 0 0 0 2px #E9A01A; white-space: nowrap; }
.qc-x-go { display: grid; justify-items: start; gap: 10px; margin-top: auto; padding-top: 6px; }
.qc-fixme .btn--primary { --btn: var(--sun, #FFC93C); color: var(--navy, #1E2A5A); }
.qc-fixme .btn--primary:hover { --btn: #FFBC14; color: var(--navy, #1E2A5A); }
.qc-fixme .btn--primary::before { -webkit-mask-image: var(--v-swatch-2); mask-image: var(--v-swatch-2); }
.qc-fixme .qc-x-fine { color: var(--on-navy, #D9E1F2) !important; }
.qc-fixme .qc-x-fine a { color: var(--cream, #FFF6E0); }
.qc-fixme .btn:focus-visible, .qc-fixme a:focus-visible { outline-color: var(--sun, #FFC93C); }

/* Email me my results */
.qc-email .form-field { display: flex; flex-direction: column; gap: 6px; }
.qc-email .form-field label { font-size: 15px; font-weight: 800; color: var(--text, #1D1A26); }
.qc-email .form-status { margin: 0; }
.qc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text, #1D1A26); cursor: pointer; }
.qc-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy, #1E2A5A); cursor: pointer; }
.qc-check input:focus-visible { outline: 3px solid var(--navy, #1E2A5A); outline-offset: 2px; }
.qc-email .btn { margin-top: 2px; }
.qc-email-done { display: grid; gap: 10px; padding: 4px 0; }
.qc-email-done:focus { outline: none; }
.qc-email-done h2 { padding-right: 0; }
.qc-email-done h2::before { content: ''; display: inline-block; width: 30px; height: 30px; margin: 0 10px -3px 0; background: var(--teal, #1F9E89); border-radius: 50%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.8 15.5L5.6 12l1.8-1.8 2.8 2.8 6.4-6.4 1.8 1.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.8 15.5L5.6 12l1.8-1.8 2.8 2.8 6.4-6.4 1.8 1.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.qc-email-done b { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .qc-extras { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .qc-x-card { padding: 26px 20px 22px; border-radius: 22px; }
  .qc-x-card h2 { font-size: 2rem; }
  .qc-x-card .btn { align-self: stretch; }
  .qc-x-go { justify-items: stretch; }
  .qc-x-tag { right: 16px; width: 62px; height: 62px; font-size: 23px; }
}