/* P3a Lernpfad player — mobile first, existing ThinkLab tokens (thinklab.css :root), paper theme for reading.
   Touch targets >= 48px, body text 1.0625rem / line-height 1.55, state never by colour alone (icon + text). */

.lp {
    max-width: 44rem;
    /* P3a-Demo: explicitly centred and sized on every width (box-sizing so the gutter never adds to the width). */
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    /* P4 Teil 0: top space only as large as needed. Without floating chips a small gap; with chips (see the
       body:has() rules below) enough to clear them — they sit fixed top right and only reach the card on screens
       narrower than card + chips (64rem). P3a-Fix B2 had a fixed 7rem everywhere. */
    padding: 1rem 1rem 3rem;
    color: var(--tl-paper-ink);
}

/* P3a-Fix B1: the head sits in its own light card — dark ink on white, independent of the layout background
   (the layout body is navy; dark text there was ~1.2:1). */
.lp-head {
    text-align: center; margin-bottom: 1rem;
    background: var(--tl-paper-surface); border: 1px solid var(--tl-paper-line); border-radius: 1rem;
    padding: 1rem 1rem 0.85rem;
}
.lp-station { margin: 0; color: var(--tl-paper-muted); font-size: .95rem; }
.lp-path { margin: .15rem 0 .75rem; font-size: 1.5rem; line-height: 1.25; color: var(--tl-paper-ink); }
.lp-count { margin: .5rem 0 0; color: var(--tl-paper-muted); font-size: .95rem; }

/* P4 Teil 0: progress bar + "4/11" replace the dots on narrow screens; on wide screens the dots stay. */
.lp-bar { display: none; height: .5rem; border-radius: 999px; background: var(--tl-gray-200); overflow: hidden; }
.lp-bar-fill { display: block; height: 100%; background: var(--tl-navy); border-radius: 999px; }
.lp-count-short { display: none; }

.lp-dots {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
    list-style: none; margin: 0; padding: 0;
}
.lp-dot {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
    border: 2px solid var(--tl-paper-line); background: var(--tl-paper-surface); color: var(--tl-paper-muted);
}
.lp-dot-done { background: var(--tl-navy); border-color: var(--tl-navy); color: var(--tl-white); }
.lp-dot-current { border-color: var(--tl-orange-ink); color: var(--tl-paper-ink); box-shadow: 0 0 0 3px var(--tl-orange-light); }
.lp-dot-locked { background: var(--tl-gray-200); }

.lp-note {
    background: var(--tl-paper-surface); border: 1px solid var(--tl-paper-line); border-radius: .75rem;
    padding: .6rem .9rem; font-size: .95rem;
}

.lp-card {
    background: var(--tl-paper-surface); border: 1px solid var(--tl-paper-line); border-radius: 1rem;
    padding: 1.25rem; box-shadow: 0 2px 10px rgba(29, 42, 58, .06);
}
.lp-type { margin: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 700; color: var(--tl-orange-ink); }
.lp-title { margin: .2rem 0 1rem; font-size: 1.35rem; line-height: 1.3; }

.lp-task {
    background: var(--tl-paper); border-left: 4px solid var(--tl-orange); border-radius: .5rem;
    padding: .75rem 1rem; margin-bottom: 1rem; font-size: 1.0625rem; line-height: 1.55;
}
.lp-task p { margin: 0 0 .4rem; }
.lp-task p:last-child { margin-bottom: 0; }
.lp-task-label { display: block; font-weight: 700; font-size: .9rem; color: var(--tl-paper-ink); }

.lp-body { font-size: 1.0625rem; line-height: 1.6; }
.lp-body img, .lp-media { max-width: 100%; height: auto; border-radius: .5rem; }
.lp-media { display: block; margin: 1rem 0; }

.lp-form { margin-top: 1rem; }
.lp-form fieldset { border: 0; margin: 0; padding: 0; }
.lp-question { font-weight: 700; font-size: 1.125rem; margin-bottom: .6rem; line-height: 1.4; }
.lp-hint { color: var(--tl-paper-muted); font-size: .95rem; margin: .25rem 0 .6rem; }
.lp-center { text-align: center; }

.lp-opt {
    display: flex; align-items: center; gap: .75rem;
    min-height: 3rem; padding: .65rem .9rem; margin-bottom: .5rem;
    border: 2px solid var(--tl-paper-line); border-radius: .75rem; background: var(--tl-paper-surface);
    font-size: 1.0625rem; line-height: 1.4; cursor: pointer;
}
.lp-opt input { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; accent-color: var(--tl-navy); }
.lp-opt:has(input:checked) { border-color: var(--tl-navy); }
.lp-opt:focus-within { outline: 3px solid var(--tl-orange-light); outline-offset: 2px; }
.lp-opt-right { border-color: #1f7a3d; background: #eaf6ee; }
.lp-opt-tag { margin-left: auto; font-weight: 700; color: #1f5f33; white-space: nowrap; }
fieldset:disabled .lp-opt { cursor: default; }

.lp-msg {
    border-radius: .75rem; padding: .7rem .9rem; margin: .75rem 0; font-weight: 600;
    display: flex; gap: .5rem; align-items: flex-start; line-height: 1.45;
}
.lp-msg-ok { background: #eaf6ee; color: #1f5f33; border: 1px solid #b7dfc3; }
.lp-msg-wrong { background: #fff4e5; color: #7a4a00; border: 1px solid #f3cf95; }
.lp-msg-info { background: var(--tl-paper); color: var(--tl-paper-ink); border: 1px solid var(--tl-paper-line); }

.lp-explain, .lp-remember, .lp-tips {
    background: var(--tl-paper); border-radius: .75rem; padding: .75rem 1rem; margin-top: 1rem;
    font-size: 1.0625rem; line-height: 1.55;
}
.lp-remember ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.lp-tips p { margin: 0 0 .5rem; }

.lp-btn { min-height: 3rem; padding: .7rem 1.25rem; font-size: 1.0625rem; display: inline-flex; align-items: center; gap: .5rem; }
.lp-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* P3a-Fix B3: explicit colours — on an <a> the browser/bootstrap link blue would win otherwise. */
.lp .lp-btn { text-decoration: none; border-radius: 999px; font-weight: 700; }
.lp .lp-btn-primary { background: var(--tl-orange); border: 2px solid var(--tl-orange); color: var(--tl-navy); }
.lp .lp-btn-primary:hover, .lp .lp-btn-primary:focus-visible { background: var(--tl-orange-hover); border-color: var(--tl-orange-hover); color: var(--tl-navy); }
.lp .lp-btn-secondary { background: var(--tl-paper-surface); border: 2px solid var(--tl-paper-line); color: var(--tl-paper-ink); }
.lp .lp-btn-secondary:hover, .lp .lp-btn-secondary:focus-visible { border-color: var(--tl-navy); color: var(--tl-paper-ink); }

/* P3a-Fix B1: hint below the navigation also on a light surface. */
.lp > .lp-hint { background: var(--tl-paper-surface); color: var(--tl-paper-ink); border-radius: .75rem; padding: .6rem .9rem; }
.lp-tip-btn { margin-top: 1rem; }

.lp-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: 1.25rem; }
.lp-next { margin-left: auto; }

.lp-done { text-align: center; }
.lp-done-icon { font-size: 3rem; color: var(--tl-orange-ink); margin: 0; }
.lp-done .lp-remember { text-align: left; }

/* P3a-Demo: demo bar ("nicht gespeichert" + "Von vorn beginnen") and the admin preview's two modes. */
.lp-demobar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
    background: var(--tl-paper-surface); color: var(--tl-paper-ink);
    border: 1px solid var(--tl-paper-line); border-left: 4px solid var(--tl-orange); border-radius: .75rem;
    padding: .5rem .75rem; margin-bottom: 1rem;
}
.lp-demobar-text { margin: 0; font-weight: 600; font-size: .95rem; }
.lp-demobar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-demobar-actions form { margin: 0; }
.lp .lp-btn-small { font-size: .95rem; padding: .55rem 1rem; }
.lp-modes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }

/* P3a-Demo: speech bubbles from Markdown blockquotes (MarkdownRenderer.RenderLearningPathHtml). The speaker stays as
   bold text ("Du:", "KI:"), so side and colour are never the only cue. Contrast: white on navy, ink on light orange /
   paper — all far above AA. Pure CSS, no script. */
.lp .lp-bubble {
    width: fit-content; max-width: 85%;
    margin: .75rem 0; padding: .65rem .9rem;
    border-radius: 1rem; border: 1px solid var(--tl-paper-line);
    background: var(--tl-paper); color: var(--tl-paper-ink);
    font-size: 1.0625rem; line-height: 1.5;
}
.lp .lp-bubble p { margin: 0 0 .35rem; }
.lp .lp-bubble p:last-child { margin-bottom: 0; }
.lp .lp-bubble-du {
    margin-left: auto; border-bottom-right-radius: .25rem;
    background: var(--tl-navy); border-color: var(--tl-navy); color: var(--tl-white);
}
.lp .lp-bubble-du a { color: var(--tl-white); text-decoration: underline; }
.lp .lp-bubble-ki {
    margin-right: auto; border-bottom-left-radius: .25rem;
    background: #fff4e5; border-color: #f3cf95; color: var(--tl-paper-ink);
}

/* P4: tutor step — reuses the speech bubbles; the dialog text keeps the child's line breaks. */
.lp-tutor { margin-top: 1rem; }
.lp-mode { margin: 0 0 .5rem; font-weight: 700; font-size: .95rem; color: var(--tl-paper-ink); }
.lp-mode-live { color: var(--tl-navy); }
.lp-chat { display: flex; flex-direction: column; }
.lp .lp-chat .lp-bubble { margin: .4rem 0; }
.lp-chat-text { white-space: pre-line; }
.lp-input {
    display: block; width: 100%; margin: .35rem 0 .6rem; padding: .65rem .8rem; min-height: 3rem;
    border: 2px solid var(--tl-paper-line); border-radius: .75rem; background: var(--tl-paper-surface); color: var(--tl-paper-ink);
    font: inherit; font-size: 1.0625rem; line-height: 1.4; resize: vertical;
}
.lp-input:focus { outline: 3px solid var(--tl-orange-light); outline-offset: 1px; border-color: var(--tl-navy); }
.lp-tutor-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* P4 Teil 0: clear the floating chips only when they are there, and only where they can reach the card. */
@media (max-width: 64rem) {
    body:has(.gnav-compact, .tl-my-area-link) .lp { padding-top: 3.75rem; }      /* one row: bottom edge ~46px */
    body:has(.tl-my-area-link ~ .tl-my-area-link) .lp { padding-top: 6.5rem; }   /* two rows: bottom edge ~90px */
}

/* P4 Teil 0: compact head on phones — station small, title one line, bar + "4/11" in one row. */
@media (max-width: 47.99rem) {
    .lp-head {
        display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .75rem;
        text-align: left; padding: .55rem .85rem .6rem; margin-bottom: .6rem;
    }
    .lp-station { grid-column: 1 / -1; font-size: .8rem; }
    .lp-path { grid-column: 1 / -1; margin: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lp-dots { display: none; }
    .lp-bar { display: block; grid-column: 1; }
    .lp-count { grid-column: 2; margin: 0; font-size: .85rem; white-space: nowrap; }
    .lp-count-long { display: none; }
    .lp-count-short { display: inline; }
    .lp-card { padding: 1rem; }
    .lp-title { margin: .15rem 0 .6rem; font-size: 1.2rem; }
    .lp-task { padding: .55rem .8rem; margin-bottom: .75rem; font-size: 1rem; line-height: 1.45; }
    .lp-demobar { padding: .35rem .5rem .35rem .75rem; margin-bottom: .6rem; flex-wrap: nowrap; }
    .lp-demobar-text { font-size: .85rem; }
    .lp-demobar-actions { flex-wrap: nowrap; }
    .lp-demobar .lp-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lp .lp-demobar .lp-btn-small { padding: .55rem .8rem; }
    .lp > .lp-note { margin: 0 0 .6rem; font-size: .85rem; padding: .4rem .7rem; }
}

@media (min-width: 48rem) {
    /* no smaller top padding here: the floating chips sit top right at every width (P3a-Fix B2) */
    .lp-card { padding: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lp * { transition: none !important; }
}