/* ==========================================================================
   Lesson flow (Hook -> Learn -> Challenge -> Completion) — shared styles.

   One global file instead of four near-identical scoped .razor.css files:
   the four screens share the same shell, top bar, footer and status blocks.
   It is global (not scoped) on purpose: .rich-text must style HTML that the
   admin's rich text editor produced, and scoped CSS cannot reach markup that
   was inserted through MarkupString.

   Depends on tokens.css + base.css (loaded before this file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Screen shell — one centered column, full viewport height
   -------------------------------------------------------------------------- */
.lesson-screen {
    min-height: 100dvh; /* dvh: follows the WebView/browser bars showing and hiding */
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) var(--space-lg) env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: var(--surface-page);
}

/* --------------------------------------------------------------------------
   2. Top bar — progress + exit. Sticky, so it stays visible while a long
      explanation scrolls. The fill animates from the previous step's width
      (--from) to this step's width (--w): the one bit of motion in the bar.
   -------------------------------------------------------------------------- */
.lesson-topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    background: var(--surface-page);
}

.lesson-topbar__progress {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}

.lesson-topbar__fill {
    height: 100%;
    width: var(--w, 0%);
    border-radius: var(--radius-pill);
    background: var(--color-brand-primary);
    animation: lesson-advance 0.5s ease-out;
}

@keyframes lesson-advance {
    from { width: var(--from, 0%); }
}

.lesson-topbar__exit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* comfortable touch target */
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 20px;
}

.lesson-topbar__exit:hover,
.lesson-topbar__exit:active { background: var(--surface-sunken); }

.lesson-topbar__exit:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. Content area + footer with the primary button. The footer is sticky, so
      "continue" is always reachable, however long the content is.
   -------------------------------------------------------------------------- */
.lesson-content {
    flex: 1;
    padding: var(--space-lg) 0 var(--space-xl);
}

.lesson-footer {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    padding: var(--space-xl) 0 var(--space-lg);
    background: linear-gradient(to top, var(--surface-page) 70%, transparent);
}

.lesson-cta {
    width: 100%;
    min-height: 48px;
}

/* --------------------------------------------------------------------------
   4. Loading / error block
   -------------------------------------------------------------------------- */
.lesson-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    text-align: center;
    color: var(--text-secondary);
}

.lesson-status p { margin: 0; line-height: var(--line-height-normal); }

.lesson-status__icon { font-size: 40px; color: var(--text-muted); }

.lesson-status__spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--surface-sunken);
    border-top-color: var(--color-brand-primary);
    animation: lesson-spin 0.8s linear infinite;
}

@keyframes lesson-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   5. Hook screen — one big statement, centered
   -------------------------------------------------------------------------- */
.lesson-hook {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) 0;
    text-align: center;
}

.lesson-hook__text {
    max-width: 480px;
    font-size: var(--font-size-display);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   6. Completion screen — the single "celebration" moment of the flow:
      the badge pops, then the XP pill rises, then the message fades in.
   -------------------------------------------------------------------------- */
.lesson-complete {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    text-align: center;
}

.lesson-complete__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--gamify-points-bg);
    color: var(--gamify-points);
    font-size: 56px;
    animation: lesson-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.lesson-complete__xp {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-pill);
    background: var(--gamify-points-bg);
    color: var(--gamify-points);
    font-size: var(--font-size-display);
    font-weight: 700;
    animation: lesson-rise 0.5s 0.3s ease-out both;
}

.lesson-complete__message {
    max-width: 320px;
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
    animation: lesson-rise 0.5s 0.5s ease-out both;
}

@keyframes lesson-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes lesson-rise {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. .rich-text — HTML written in the admin's rich text editor (Quill).
      Add the class to any element that receives a MarkupString.
      The app does not load Quill's own CSS, so the class-based formats Quill
      writes (alignment, size) and its bullet-list markup are handled here.
   -------------------------------------------------------------------------- */
.rich-text > :first-child { margin-top: 0; }

.rich-text p { margin: 0 0 var(--space-md); }
.rich-text p:last-child { margin-bottom: 0; }

.rich-text strong { font-weight: 700; }

.rich-text :is(ul, ol) {
    margin: 0 0 var(--space-md);
    padding-inline-start: var(--space-xl);
}

.rich-text li { margin-bottom: var(--space-xs); }

/* Quill 2 can write bullets as <ol><li data-list="bullet">, which would show numbers. */
.rich-text li[data-list="bullet"] { list-style-type: disc; }
.rich-text li[data-list="ordered"] { list-style-type: decimal; }
.rich-text .ql-ui { display: none; }

.rich-text :is(h1, h2, h3) {
    margin: var(--space-lg) 0 var(--space-sm);
    line-height: var(--line-height-tight);
    font-weight: 700;
}
.rich-text h1 { font-size: var(--font-size-title); }
.rich-text h2 { font-size: var(--font-size-heading); }
.rich-text h3 { font-size: var(--font-size-base); }

.rich-text blockquote {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 3px solid var(--color-brand-secondary);
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}

.rich-text a { color: var(--text-link); text-decoration: underline; }

.rich-text img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-align-left { text-align: left; }
.rich-text .ql-align-justify { text-align: justify; }

.rich-text .ql-size-small { font-size: 0.85em; }
.rich-text .ql-size-large { font-size: 1.25em; }
.rich-text .ql-size-huge { font-size: 1.5em; }

/* --------------------------------------------------------------------------
   8. Respect "reduce motion"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lesson-topbar__fill,
    .lesson-complete__badge,
    .lesson-complete__xp,
    .lesson-complete__message { animation: none; }

    .lesson-status__spinner { animation-duration: 2.4s; }
}