/*! * Расшифровщик спермограммы — стили квиза. * * Подключается только на page-templates/analysis-decryptor.php. * Файл идёт после androlog.css и намеренно лежит вне @layer: правила * вне слоёв сильнее слоёных, поэтому !important здесь не нужен нигде. * * Палитра целиком на токенах темы. Собственных цветов файл не заводит, * гарнитуру не задаёт — она наследуется от body. * * Оглавление * 01 Оболочка и прогресс * 02 Карточка вопроса * 03 Поля ответа * 04 Ошибка и навигация * 05 Результат * 06 Узкий экран */ .sperm-wrapper{max-inline-size:42.5rem;padding:var(--s-5);border-radius:var(--radius-card);background:var(--sand);color:var(--ink);margin-inline:auto}.sperm-wrapper [hidden]{display:none}.progress-text{color:var(--accent-strong);font-size:var(--t-sm);margin-block-end:var(--s-2);font-weight:640}.progress-line{block-size:.375rem;border-radius:var(--radius-pill);background:color-mix(in oklab, var(--ink-3) 20%, var(--surface));margin-block-end:var(--s-4);overflow:hidden}.progress-fill{border-radius:inherit;background:var(--accent);block-size:100%;inline-size:0;transition:inline-size .25s}.quiz-card{padding:var(--s-5);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--e-1)}.question-title{font-size:var(--t-xl);font-weight:680;line-height:var(--lh-snug);letter-spacing:-.01em;text-wrap:balance}.question-hint{color:var(--ink-3);font-size:var(--t-sm);line-height:var(--lh-base);text-wrap:pretty;margin-block-start:var(--s-2)}.question-hint:empty{display:none}.quiz-answer{min-block-size:3rem;margin-block-start:var(--s-4)}.quiz-input{border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in oklab, var(--sand) 45%, var(--surface));inline-size:100%;color:var(--ink);font-size:var(--t-md);padding:.75rem 1rem;line-height:1.4;transition:border-color .15s,box-shadow .15s,background-color .15s}.quiz-input:focus-visible{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring);outline:none}.quiz-input[aria-invalid=true]{border-color:var(--bad)}.toggle-row{gap:var(--s-3);flex-wrap:wrap;display:flex}.toggle-btn{border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-size:var(--t-md);cursor:pointer;padding:.625rem 1.5rem;font-weight:620;line-height:1.2;transition:background-color .15s,border-color .15s,color .15s}.toggle-btn:hover{border-color:var(--accent)}.toggle-btn:focus-visible{box-shadow:var(--ring);outline:none}.toggle-btn.active{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.consent-label{align-items:flex-start;gap:var(--s-3);font-size:var(--t-sm);line-height:var(--lh-base);cursor:pointer;display:flex}.consent-checkbox{block-size:1.15rem;inline-size:1.15rem;min-inline-size:1.15rem;accent-color:var(--accent);cursor:pointer;margin-block-start:.15rem}.consent-checkbox:focus-visible{box-shadow:var(--ring);outline:none}.consent-text a{color:var(--accent-strong);font-weight:620}.submit-info{padding:var(--s-4);border-radius:var(--radius);background:var(--accent-soft);font-size:var(--t-sm);line-height:var(--lh-base);text-wrap:pretty}.submit-info strong{color:var(--accent-strong);font-weight:660}.quiz-error{padding:var(--s-3) var(--s-4);border-inline-start:3px solid var(--bad);border-radius:var(--radius);background:var(--bad-soft);color:color-mix(in oklab, var(--bad) 70%, var(--ink));font-size:var(--t-sm);line-height:var(--lh-base);text-wrap:pretty;margin-block-start:var(--s-3)}.nav-row{gap:var(--s-3);margin-block-start:var(--s-5);display:flex}.nav-btn{border-radius:var(--radius-pill);font-size:var(--t-md);cursor:pointer;border:1px solid #0000;flex:1;padding:.75rem 1.25rem;font-weight:640;line-height:1.2;transition:background-color .18s,border-color .18s,color .18s}.nav-btn:focus-visible{box-shadow:var(--ring);outline:none}.nav-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{border-color:var(--line);background:var(--surface);color:var(--ink-2)}.back-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-strong)}.next-btn{background:var(--accent);color:var(--accent-ink)}.next-btn:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 88%, black)}.result-box{padding:var(--s-5);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--e-1)}@media (width>=64em){.sperm-wrapper:has(.result-box:not([hidden])){max-inline-size:64rem}.result-box .ref-row{column-gap:var(--s-5);padding-block:var(--s-4);grid-template-columns:minmax(8rem,1fr) auto minmax(11rem,1.3fr) auto;grid-template-areas:"name value bar status"}.result-box .ref-row .status{justify-self:end}}.result-box .ref-row+.ref-row{border-block-start:1px solid var(--line)}.result-title{font-size:var(--t-2xl);font-weight:680;line-height:var(--lh-snug);letter-spacing:-.02em;margin-block-end:var(--s-4)}.result-item{align-items:flex-start;gap:var(--s-3);font-size:var(--t-sm);line-height:var(--lh-base);display:flex}.result-item+.result-item{margin-block-start:var(--s-2)}.result-item strong{font-weight:640}.dot{border-radius:50%;flex:none;block-size:.625rem;inline-size:.625rem;margin-block-start:.5em;display:block}.dot.green{background:var(--ok)}.dot.yellow{background:color-mix(in oklab, var(--warn) 55%, var(--ok))}.dot.orange{background:var(--warn)}.dot.red{background:var(--bad)}.dot.gray{background:var(--ink-3)}.final-message{padding:var(--s-4);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-strong);font-size:var(--t-sm);font-weight:600;line-height:var(--lh-base);text-wrap:pretty;margin-block-start:var(--s-4)}.result-actions{gap:var(--s-3);flex-wrap:wrap;margin-block-start:var(--s-5);display:flex}.action-btn{border-radius:var(--radius-pill);font-size:var(--t-md);text-align:center;cursor:pointer;border:1px solid #0000;flex:12rem;justify-content:center;align-items:center;padding:.75rem 1.25rem;font-weight:640;line-height:1.2;text-decoration:none;transition:background-color .18s,border-color .18s,color .18s;display:inline-flex}.action-btn:focus-visible{box-shadow:var(--ring);outline:none}.restart-btn{border-color:var(--line);background:var(--surface);color:var(--ink-2)}.restart-btn:hover{border-color:var(--accent);color:var(--accent-strong)}.consult-btn,.consult-btn:visited{background:var(--accent);color:var(--accent-ink)}.consult-btn:hover{background:color-mix(in oklab, var(--accent) 88%, black);color:var(--accent-ink)}@supports selector(:popover-open){.modal-fallback{display:none}}@supports not selector(:popover-open){.modal-trigger{display:none}}@media (width<=40rem){.sperm-wrapper,.quiz-card,.result-box{padding:var(--s-4)}.quiz-answer{min-block-size:4rem}.nav-row{gap:var(--s-2)}.nav-btn{padding:.75rem 1rem}.action-btn{flex-basis:100%}}