/* Only the free self-check on this question page. */
#free-self-check [hidden] { display: none; }
#free-self-check h2 { max-width: 24ch; }
#free-self-check .self-check-intro { max-width: 72ch; color: var(--muted); }
#free-self-check form { margin-top: 32px; }
#free-self-check .self-check-field { margin-bottom: 26px; }
#free-self-check label { display: block; margin-bottom: 10px; font-weight: 760; color: var(--navy); }
#free-self-check select, #free-self-check textarea { display: block; width: 100%; min-width: 0; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--small-radius); color: var(--navy); background: var(--strong); font: inherit; }
#free-self-check select { min-height: 52px; }
#free-self-check .self-check-selection { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
#free-self-check textarea { margin-top: 12px; min-height: 480px; resize: vertical; line-height: 1.7; }
#free-self-check :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#free-self-check .self-check-actions { display: flex; flex-wrap: wrap; gap: 16px; }
#free-self-check button { cursor: pointer; min-height: 48px; }
#free-self-check .self-check-reset { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
#free-self-check .self-check-reset:hover { background: var(--accent-soft); color: var(--accent); }
#free-self-check .self-check-result { margin-top: 36px; border-left: 4px solid var(--accent); padding: 24px 28px; background: var(--accent-soft); }
#free-self-check .self-check-result h3 { margin: 28px 0 12px; font-size: 1.2rem; }
#free-self-check .self-check-result ul, #free-self-check .self-check-result ol { padding-left: 24px; }
#free-self-check .self-check-result li { padding-left: 4px; margin-bottom: 12px; }
#free-self-check .self-check-result p { max-width: 72ch; }
#free-self-check .self-check-status { min-height: 1.7em; margin: 20px 0 0; color: var(--muted); }
@media (max-width: 720px) {
  #free-self-check .self-check-result { padding: 20px 16px; }
  #free-self-check select { font-size: 1rem; }
  #free-self-check .self-check-actions { flex-direction: column; }
  #free-self-check button { width: 100%; }
}