/* Quizet återanvänder webbplatsens färger, typsnitt, knappar och sidfot. */
.quiz-page [hidden] { display: none !important; }
.quiz-page { overflow-x: visible; }
.quiz-page .main-header { position: relative; height: auto; min-height: 70px; }
.quiz-page .header-container { min-height: 70px; gap: 1rem; flex-wrap: wrap; padding-top: .8rem; padding-bottom: .8rem; }
.q-nav { display: flex; gap: 1.25rem; font-size: .9rem; }
.q-nav a { color: var(--color-text-light); }
.q-skip { position: absolute; top: -100px; left: 1rem; z-index: 2000; background: white; color: #121824; padding: 1rem; }
.q-skip:focus { top: .5rem; }
.q-hero { padding: 3rem 0; text-align: center; }
.q-hero h1 { font-family: var(--font-heading); font-size: clamp(2rem, 7vw, 3.5rem); margin: .6rem 0 1rem; }
.q-hero p { color: var(--color-text-light); }
.q-hero .q-eyebrow { color: var(--color-accent-gold); letter-spacing: .1em; font-size: .75rem; font-weight: 700; }
.q-main { padding-top: 2rem; padding-bottom: 4rem; min-height: 45vh; }
.q-public { max-width: 740px; margin-inline: auto; }
.q-card { background: white; border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); overflow-wrap: anywhere; }
.quiz-page h2 { font-size: 1.45rem; margin-bottom: 1rem; }
.quiz-page h3 { font-size: 1.15rem; margin-bottom: .75rem; }
.q-main p { margin-bottom: 1rem; }
.q-main p:last-child { margin-bottom: 0; }
.q-main .q-help { color: #4b5563; font-size: .9rem; }
.q-link { color: #26436b; text-decoration: underline; text-underline-offset: .2em; }
.q-link:hover { color: #121824; }
.q-link-button { background: none; border: 0; padding: .6rem 0; font: inherit; cursor: pointer; }
.q-start, .q-stack { display: grid; gap: 1.25rem; }
.q-main fieldset { border: 0; min-width: 0; }
.q-main legend { font-weight: 700; margin-bottom: .75rem; width: 100%; }
.q-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.q-option { position: relative; cursor: pointer; min-width: 0; }
.q-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-option > span { border: 2px solid #8a93a0; border-radius: var(--border-radius-md); background: white; color: #1f2937; min-height: 54px; padding: .8rem .55rem; display: flex; align-items: center; justify-content: center; height: 100%; gap: .75rem; text-align: center; overflow-wrap: anywhere; }
.q-option input:checked + span { border-color: #121824; background: var(--color-accent-gold); color: #121824; box-shadow: inset 0 0 0 1px #121824; }
.q-option input:checked + span::after { content: '✓'; font-weight: 800; }
.q-option input:focus-visible + span { outline: 3px solid #2457a6; outline-offset: 3px; }
.q-option strong { font-size: 1.15rem; min-width: 1.2rem; }
.q-modes { grid-template-columns: 1fr 1fr; }
.q-modes .q-option > span { display: block; text-align: left; padding: 1rem; font-weight: 700; }
.q-option small { display: block; font-weight: 400; font-size: .85rem; margin-top: .4rem; }
.q-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.q-main input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .q-main select { font: inherit; font-size: 16px; width: 100%; max-width: 100%; padding: .8rem; color: #1f2937; background: white; border: 1px solid #687383; border-radius: var(--border-radius-md); min-height: 48px; }
.q-main select option { color: #1f2937; background: white; }
.quiz-page :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid #2457a6; outline-offset: 3px; }
.quiz-page .main-header a:focus-visible { outline-color: var(--color-accent-gold); }
.q-main .form-group { margin-bottom: .5rem; }
.q-intro { margin-bottom: 1.5rem; }
.q-intro h2 { margin-top: 1.25rem; }
.q-questions { margin: 1.5rem 0; }
.q-question { padding: 1.25rem 0; border-bottom: 1px solid var(--color-border-light) !important; }
.q-number { display: block; }
.q-question-text { display: block; font-size: 1.1rem; margin-top: .5rem; font-weight: 600; }
.q-options-full { grid-template-columns: 1fr; }
.q-options-full .q-option > span { justify-content: flex-start; text-align: left; padding: .9rem 1rem; }
.q-options-full .q-option input:checked + span::after { margin-left: auto; }
.q-tie label { display: grid; gap: .5rem; margin-bottom: .75rem; }
.q-tie .q-help { margin-top: .75rem; }
.q-check { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; cursor: pointer; }
.q-check input { flex-shrink: 0; width: 22px; height: 22px; margin-top: .15rem; accent-color: #121824; }
.q-notice { padding: 1rem; margin-bottom: 1.5rem; background: #edf6ef; border-left: 4px solid #25643b; border-radius: 4px; }
.q-error { background: #fff0f0; border-color: #a4202c; color: #821923; }
.q-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.quiz-page .btn { min-height: 48px; white-space: normal; text-align: center; }
.quiz-page .btn:hover { transform: none; }
.quiz-page .btn:disabled { opacity: .65; cursor: wait; }
.q-category-links, .q-admin-toolbar, .q-admin-actions, .q-inline { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.q-admin-toolbar { padding: .5rem 0; }
.q-admin-toolbar a { padding: .6rem 0; }
.q-admin-actions { margin-top: 1rem; }
.q-admin-actions form { max-width: 550px; }
.q-danger { background: #a4202c; color: white; }
.q-danger:hover { background: #821923; }
.q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin: 1rem 0; }
.q-stats strong { display: block; font-size: 2rem; color: var(--color-primary); }
.q-table-wrap { overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--border-radius-md); background: white; }
.q-table-wrap table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
.q-table-wrap caption { text-align: left; padding: 1rem; color: #4b5563; }
.q-table-wrap th { background: var(--color-primary); color: white; }
.q-table-wrap :is(th, td) { padding: .85rem; border-bottom: 1px solid var(--color-border-light); }
.q-top { background: #fff4d9; }
.q-badge { display: block; font-size: .75rem; font-weight: 700; color: #493a13; margin-top: .25rem; }
.q-warning { color: #821923; }
.q-results, .q-facit, .q-paper { margin-top: 2.5rem; }
.q-facit, .q-paper, .q-results details { scroll-margin-top: 1rem; }
.q-answer-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0; }
.q-main summary { cursor: pointer; font-weight: 700; padding: .5rem 0; min-height: 44px; }
.q-main details[open] summary { margin-bottom: 1rem; }
.q-inline select { width: auto; }
.q-main code { overflow-wrap: anywhere; }
@media (max-width: 540px) {
    .quiz-page .header-container { justify-content: center; }
    .q-hero { padding: 2rem 0; }
    .q-main { padding-inline: 1rem; }
    .q-card { padding: 1.1rem; }
    .q-contact, .q-modes { grid-template-columns: 1fr; }
    .q-main h2 { font-size: 1.25rem; }
    .q-answer-list { grid-template-columns: 1fr; }
    .q-nav { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-page *, .quiz-page *::before, .quiz-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}