/* Symtomtestet för klimakteriet (symtomtest.js). Bara sajtens tokens. */
.st-app { margin: var(--lp-space-6) 0 var(--lp-space-8); padding: var(--lp-space-6); border-radius: var(--lp-r-xl); background: var(--lp-bg-raised); box-shadow: var(--lp-elev-1); scroll-margin-top: 96px; }
.st-app:empty::before { content: "Laddar testet..."; color: var(--lp-ink-muted); }
.st-framsteg { margin-bottom: var(--lp-space-4); }
.st-framsteg__spar { height: 6px; border-radius: var(--lp-r-pill); background: var(--lp-bg-sunken); overflow: hidden; }
.st-framsteg__fyll { height: 100%; background: var(--lp-brand); border-radius: var(--lp-r-pill); transition: width var(--lp-dur) var(--lp-ease); }
.st-framsteg__text { margin: var(--lp-space-2) 0 0; font-size: 0.875rem; color: var(--lp-ink-muted); }
.st-omrade { margin: 0 0 var(--lp-space-1); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-ink-muted); }
.st-rubrik { margin: 0; font-family: var(--lp-font-display); font-size: 1.375rem; line-height: var(--lp-leading-title); color: var(--lp-brand-deep); outline: none; }
.st-hjalp { margin: var(--lp-space-2) 0 0; color: var(--lp-ink-soft); }
.st-lista { display: grid; gap: var(--lp-space-2); margin-top: var(--lp-space-4); }
.st-val { display: flex; align-items: center; gap: var(--lp-space-3); width: 100%; min-height: 48px; padding: var(--lp-space-3) var(--lp-space-4); border: 1.5px solid var(--lp-line); border-radius: var(--lp-r-md); background: var(--lp-bg-surface); color: var(--lp-ink); font: inherit; text-align: left; cursor: pointer; }
.st-val:hover { border-color: var(--lp-line-strong); }
/* --lp-focus är ett box-shadow-värde, inte en färg: som outline blev regeln ogiltig och ingen fokus syntes. */
.st-val:focus-visible { outline: none; box-shadow: var(--lp-focus); }
.st-val--valt { border-color: var(--lp-brand); background: var(--lp-brand-tint); }
.st-val__markor { flex: none; width: 20px; height: 20px; border-radius: var(--lp-r-pill); border: 1.5px solid var(--lp-line-strong); background: var(--lp-bg-raised); }
.st-val[role="checkbox"] .st-val__markor { border-radius: var(--lp-r-sm); }
.st-val--valt .st-val__markor { border-color: var(--lp-brand); background: var(--lp-brand); box-shadow: inset 0 0 0 4px var(--lp-bg-raised); }
.st-sakerhet { margin: var(--lp-space-3) 0 0; padding: var(--lp-space-3) var(--lp-space-4); border-radius: var(--lp-r-md); background: var(--lp-danger-bg); color: var(--lp-danger); }
.st-knappar { display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-3); margin-top: var(--lp-space-6); }
.st-knappar .st-knapp { margin-left: auto; }
.st-knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--lp-space-6); border: 0; border-radius: var(--lp-r-pill); background: var(--lp-brand); color: var(--lp-on-brand); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.st-knapp:disabled { opacity: 0.45; cursor: not-allowed; }
.st-knapp--sekundar { background: var(--lp-brand-tint); color: var(--lp-brand-deep); }
.st-lank { min-height: 44px; padding: 0 var(--lp-space-2); border: 0; background: none; color: var(--lp-brand-deep); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Resultatet per område (13/10): namnet och en skala i fyra steg, Inga, Lite,
   Ganska mycket och Väldigt mycket, där ditt steg är ifyllt. Raderna är
   neutrala med hårlinje emellan; det ifyllda steget är radens enda betoning.
   Skalan skrivs ut med färg (print-color-adjust) och har dessutom fet text
   och kant, så den går att läsa även på en svartvit utskrift. */
.st-app .st-omraden { list-style: none; margin: var(--lp-space-4) 0 0; padding: 0; border-top: 1px solid var(--lp-line); }
.st-omraden__rad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lp-space-2); padding: var(--lp-space-3) 0; border-bottom: 1px solid var(--lp-line); color: var(--lp-ink); }
.st-omraden__namn { font-weight: 600; line-height: var(--lp-leading-title); }
.st-omraden__ej { font-size: var(--lp-text-small); color: var(--lp-ink-muted); }
.st-skala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.st-skala__steg { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px; border: 1px solid var(--lp-line); border-radius: var(--lp-r-sm); background: var(--lp-bg-surface); color: var(--lp-ink-muted); font-size: var(--lp-text-meta); line-height: 1.2; text-align: center; }
.st-skala__steg--valt { border: 2px solid var(--lp-brand); background: var(--lp-brand); color: var(--lp-on-brand); font-weight: 700; }
.st-omraden__rad--mer .st-skala__steg--valt { border-color: var(--lp-brand-deep); background: var(--lp-brand-deep); }
@media (min-width: 640px) {
  .st-omraden__rad { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); align-items: center; column-gap: var(--lp-space-4); }
}
.st-rad { margin: var(--lp-space-3) 0 0; color: var(--lp-ink-soft); }
/* Inget kort i kortet (13/10): nästa steg låg i en tonad ruta inne i testets kort. */
.st-vidare { margin-top: var(--lp-space-8); }
.st-vidare h3 { margin: 0 0 var(--lp-space-2); font-family: var(--lp-font-display); color: var(--lp-brand-deep); }
.st-vidare p { margin: 0 0 var(--lp-space-4); color: var(--lp-ink-soft); }
.st-atgarder { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); margin-top: var(--lp-space-4); }
@media (max-width: 560px) { .st-app { padding: var(--lp-space-4); border-radius: var(--lp-r-lg); } }
@media print {
  .nav, .footer, .st-knappar, .st-atgarder, .st-vidare, .st-om, .v3-related, .st-tillbaka { display: none !important; }
  .st-app { box-shadow: none; padding: 0; }
}
.st-omraden + .st-hjalp { margin-top: var(--lp-space-4); }

/* Vanliga frågor: sajtens gemensamma komponent .lp-faq i site-chrome.css (13/10). */
.st-om h2 + .lp-faq { margin-top: var(--lp-space-2); }

/* Tillbakalänken är sajtens sekundärknapp (13/10), med luft som den gamla .info-back. */
.st-tillbaka { margin-top: 56px; }