/* Kalam — self-hosted (žádné Google Fonts, plná česká diakritika) */
@font-face {
    font-family: 'Kalam';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/kalam-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Kalam';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/kalam-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Kalam';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/kalam-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Kalam';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/kalam-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {
    font-size: 18px;
}

@media (max-width: 600px) {
    html { font-size: 17px; }
}

body {
    font-family: 'Kalam', 'Bradley Hand', cursive;
    font-weight: 700;
    margin: 0;
    line-height: 1.55;
    color: #1f1d26;
}

.doodle {
    min-height: 100vh;
}

.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.site-header {
    border-bottom: 2px dashed #c8b9a4;
    padding: 2rem 0 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.site-header .brand {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: #1f1d26;
}

.site-header .tagline {
    font-size: 1.25rem;
    font-weight: 400;
    color: #5a5a5a;
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    .site-header .brand { font-size: 2.4rem; }
    .site-header .tagline { font-size: 1.05rem; }
}

.site-footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 2px dashed #c8b9a4;
    font-size: 0.95rem;
    font-weight: 400;
    color: #888;
    text-align: center;
}

h1, h2, h3 {
    font-family: 'Kalam', 'Bradley Hand', cursive;
    font-weight: 700;
    color: #1f1d26;
    line-height: 1.2;
}

h1 { font-size: 2.4rem; margin-top: 0.5rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.3rem; }

.box, .doodle-border {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: #FFFCF7;
}

.muted {
    color: #4a4a4a;
    font-size: 1rem;
}

/* Kalam nemá italic — kurzíva by browser fakoval a vypadalo by to rozsypaně */
em, i {
    font-style: normal;
}

.alert {
    background: #FFE8D6;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid #d88a4a;
}

.alert.danger {
    background: #FFD6D6;
    border-left-color: #c0463a;
}

.alert.success {
    background: #DEFFE0;
    border-left-color: #2e7d57;
}

.notice {
    font-size: 1rem;
    color: #3a3a3a;
}

label.field {
    display: block;
    margin-bottom: 1rem;
}

label.field > .label-text {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

.doodle input[type=text],
.doodle input[type=password],
.doodle textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: 'Kalam', 'Bradley Hand', cursive;
    font-size: 1rem;
}

.doodle button {
    cursor: pointer;
    padding: 0.5rem 1.25rem;
    font-family: 'Kalam', 'Bradley Hand', cursive;
    font-size: 1rem;
    background: #FDF7F1;
}

.doodle button.primary {
    background: #2a2a2a;
    color: #FDF7F1;
}

.doodle button.danger {
    background: #c0463a;
    color: #fff;
}

.doodle button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-row.between {
    justify-content: space-between;
}

a.button-like, button.link-like {
    border: none;
    background: none;
    color: #1c1c1c;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Kalam', 'Bradley Hand', cursive;
    font-size: 1rem;
    padding: 0.5rem 0.25rem;
}

/* Progress */
.progress {
    background: #f0e4d4;
    height: 14px;
    margin: 0.5rem 0 1rem;
    border: 1.5px solid #2a2a2a;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    background: #2a2a2a;
    height: 100%;
    transition: width 0.3s;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #555;
}

/* Question */
.question {
    border-bottom: 1.5px dashed #d4c4ad;
    padding: 1rem 0;
}

.question:first-child {
    padding-top: 0;
}

.question:last-child {
    border-bottom: none;
}

.question-number {
    color: #666;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.question-text {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f1d26;
    line-height: 1.4;
}

.question-examples {
    font-size: 1rem;
    font-weight: 700;
    font-style: normal;
    color: #3a3a3a;
    margin: 0.25rem 0 0.6rem;
    padding-left: 0.75rem;
    border-left: 3px solid #d4c4ad;
}

.answer-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.answer-row label {
    cursor: pointer;
    padding: 0.5rem 1.1rem;
    background: #FDF7F1;
    border-style: solid;
    border-width: 8px;
    border-image: url("/assets/button.svg") 10 10 10 10 stretch stretch;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f1d26;
    position: relative;
    user-select: none;
}

.answer-row label.checked {
    background: #2a2a2a;
    color: #FDF7F1;
}

/* Radio button schovaný, ale stále interaktivní */
.answer-row input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Results */
.scores {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.score-row {
    display: grid;
    grid-template-columns: 7em 1fr 5.5em;
    align-items: center;
    gap: 0.5rem;
}

.score-bar {
    background: #f0e4d4;
    height: 14px;
    border: 1.5px solid #2a2a2a;
    overflow: hidden;
}

.score-bar > div {
    height: 100%;
}

.score-bar .anx { background: #c0463a; }
.score-bar .sec { background: #2e7d57; }
.score-bar .avo { background: #3a6fb0; }

.score-num {
    font-family: monospace;
    font-weight: 700;
    text-align: right;
    color: #3a3a3a;
    white-space: nowrap;
}

.confidence-tag {
    font-size: 0.8rem;
    background: #f0e4d4;
    padding: 0.15rem 0.5rem;
    margin-left: 0.5rem;
}

.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.lists-grid h4 {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
}

.lists-grid ul {
    padding-left: 1.25rem;
    margin: 0;
}

.perception-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.perception-cell {
    background: #f6efe2;
    padding: 0.5rem;
    text-align: center;
}

.perception-cell .scale {
    font-size: 0.8rem;
    color: #777;
}

.perception-cell .val {
    font-family: monospace;
    font-size: 1.1rem;
}

/* Admin */
.room-card {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
}

.room-card .label {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f1d26;
}

.room-card .meta {
    color: #3a3a3a;
    font-size: 1rem;
    font-weight: 700;
}

.room-card .status {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    background: #f0e4d4;
    font-size: 1rem;
    font-weight: 700;
    color: #1f1d26;
}

.room-card .status.done {
    background: #DEFFE0;
}

.room-card .status.archived {
    background: #e9e9e9;
    color: #888;
}

.link-box {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-family: monospace;
    font-size: 0.85rem;
    background: #f6efe2;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    word-break: break-all;
}

.link-box .partner-tag {
    background: #2a2a2a;
    color: #fff;
    padding: 0.1rem 0.4rem;
    font-family: 'Kalam', 'Bradley Hand', cursive;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.copy-btn {
    background: #FDF7F1;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1.5px solid #2a2a2a;
    flex-shrink: 0;
    font-family: 'Kalam', 'Bradley Hand', cursive;
}

.copy-btn.copied {
    background: #DEFFE0;
}

.checkbox-field {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    cursor: pointer;
}

.checkbox-field input {
    margin-top: 0.3rem;
}

@media (max-width: 600px) {
    .score-row {
        grid-template-columns: 5em 1fr 4.5em;
        font-size: 0.9rem;
    }
    h1 { font-size: 1.5rem; }
    .perception-grid {
        grid-template-columns: 1fr;
    }
}

/* Stránkování dotazníku */
.questionnaire-nav {
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-top: 1.5px dashed #d4c4ad;
}

.questionnaire-nav .page-info {
    font-weight: 700;
    color: #4a4a4a;
}

/* ===================================================================== */
/* Výsledková stránka — rozšířený layout                                 */
/* ===================================================================== */

.disclaimer {
    background: #FFF6E5;
    border-left: 4px solid #d88a4a;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #3a3a3a;
}

.person-short {
    margin-bottom: 1rem;
}

.result-section {
    border-style: solid;
    border-width: 10px;
    border-image: url("/assets/border.svg") 10 10 10 10 stretch stretch;
    background: #FFFCF7;
    padding: 0 1.25rem;
    margin-bottom: 1.25rem;
}

.result-section > summary {
    cursor: pointer;
    padding: 1rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1f1d26;
    list-style: none;
    position: relative;
}

.result-section > summary::-webkit-details-marker { display: none; }

.result-section > summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 1rem;
    font-size: 1.4rem;
    color: #888;
    transition: transform 0.2s;
}

.result-section[open] > summary::after {
    content: '−';
}

.result-section-body {
    padding-bottom: 1.25rem;
}

.result-section-body h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
    color: #1f1d26;
}

.result-section-body p {
    margin: 0 0 0.75rem;
    line-height: 1.6;
}

.result-section-body ul,
.result-section-body ol {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
    line-height: 1.55;
}

.result-section-body li {
    margin-bottom: 0.35rem;
}

.useful-sentence {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid #d4c4ad;
    background: #f9f3e5;
    font-style: normal;
    font-weight: 700;
    color: #1f1d26;
    line-height: 1.5;
}

.perception-item {
    border-top: 1.5px dashed #d4c4ad;
    padding-top: 1rem;
    margin-top: 1rem;
}

.perception-item:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.print-row {
    justify-content: center;
    margin-top: 1.5rem;
}

/* ===================================================================== */
/* Print stylesheet — PDF export přes window.print()                     */
/* ===================================================================== */

@media print {
    /* Vynutit tisk barevných backgroundů (score bars, badges) — defaultně browsery šetří inkoust */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Čitelný font pro print — sans-serif, ne Kalam (handwriting hůř čitelný v print) */
    body, body.doodle {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
        font-weight: 400 !important;
        color: #000 !important;
        background: #fff !important;
        font-size: 11pt !important;
        line-height: 1.55 !important;
    }

    /* Score bars — explicitně přebít border-image a zachovat barvy */
    .score-bar {
        border: 1.5pt solid #000 !important;
        background: #f0e4d4 !important;
    }
    .score-bar > div {
        height: 100% !important;
    }
    .score-bar .anx { background: #c0463a !important; }
    .score-bar .sec { background: #2e7d57 !important; }
    .score-bar .avo { background: #3a6fb0 !important; }

    h1, h2, h3, h4 {
        font-family: 'Kalam', 'Bradley Hand', cursive !important;
        font-weight: 700 !important;
        color: #000 !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    h1 { font-size: 22pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 13pt !important; }

    /* Skrýt UI elementy které do PDF nepatří */
    .site-header, .site-footer, .print-row, noscript,
    #results-loading, #results-error, button {
        display: none !important;
    }

    /* Zobrazit všechny details (i kdyby uživatel zapomněl otevřít) */
    details, details[open] {
        display: block !important;
    }
    details > summary {
        font-weight: 700;
        page-break-after: avoid;
    }
    details > summary::after { display: none !important; }

    .result-section {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
        page-break-inside: avoid;
    }

    .doodle-border, .doodle .border {
        border-style: solid !important;
        border-width: 1.5pt !important;
        border-image: none !important;
        border-color: #888 !important;
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        page-break-inside: avoid;
    }

    .alert, .disclaimer, .useful-sentence {
        page-break-inside: avoid;
        background: #f5f5f5 !important;
        border-left-width: 3pt !important;
    }

    ul, ol, p {
        orphans: 3;
        widows: 3;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 18mm 15mm;
    }

    a {
        color: #000 !important;
        text-decoration: none;
    }
}