/* ============================================================================
   Learn step by step (learnpaths.js): the ladder of steps and the "Show me"
   card on #screen-path, plus the clock tiles and pictures the Clock topic
   puts on the quiz screen.
   ============================================================================ */
#screen-path {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3) 72px;
}
#screen-path .gh { max-width: 560px; }
.lp-wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- The ladder ---- */
.lp-intro { margin: 0; color: var(--c-ink-soft); font-weight: 700; text-align: center; }
.lp-fresh { align-self: center; min-height: var(--tap); }
.lp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.lp-step {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    text-align: left;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 3px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    cursor: pointer;
    transition: transform var(--t-fast);
}
.lp-step:hover:not(:disabled) { transform: translateY(-2px); }
.lp-num {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 900;
    background: var(--c-surface-soft);
    border: 2px solid var(--c-line);
}
.lp-icon { font-size: 1.8rem; line-height: 1; }
.lp-text { display: flex; flex-direction: column; gap: 2px; }
.lp-text b { font-size: var(--fs-md); }
.lp-text small { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-soft); }
.lp-step.is-done { border-color: var(--c-success); background: var(--c-success-soft); }
.lp-step.is-done .lp-num { background: var(--c-success); border-color: var(--c-success-dark); color: var(--c-surface); }
.lp-step.is-here { border-color: var(--teal-line); background: var(--teal-bg); }
.lp-step.is-here .lp-num { background: var(--teal-ink); border-color: var(--teal-ink); color: var(--c-surface); }
.lp-step.is-here small { color: var(--teal-ink); }
.lp-step.is-locked { cursor: default; box-shadow: none; background: var(--c-surface-soft); }
.lp-step.is-locked .lp-icon { filter: grayscale(1); }

/* ---- "Show me" card ---- */
.lp-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    color: var(--c-ink);
}
.lp-kicker { margin: 0; font-weight: 800; color: var(--teal-ink); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-sm); }
.lp-name { margin: 0; font-size: var(--fs-xl); }
.lp-teach { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); line-height: 1.5; }
.lp-teach p { margin: 0; }
.lp-card .nq-speak-big { margin: 0; }
.lp-go { min-height: 56px; font-size: var(--fs-lg); }

/* Pieces the Clock topic uses in its cards and questions */
.lp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.lp-row .nq-clock { width: 150px; }
.lp-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.lp-fig figcaption { font-weight: 800; color: var(--c-ink); }
.lp-fig .nq-clock { width: 160px; }
.lp-big { font-size: 3rem; line-height: 1.1; }
.lp-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.lp-days li { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--blue-bg); border: 2px solid var(--blue-line); color: var(--blue-ink); font-weight: 800; }
.lp-days li.is-weekend { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-ink); }
.lp-fives { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-1); width: 100%; max-width: 360px; }
.lp-fives span { display: flex; flex-direction: column; align-items: center; padding: var(--sp-1); border-radius: var(--r-sm); background: var(--teal-bg); color: var(--teal-ink); font-weight: 800; }
.lp-fives b { font-size: var(--fs-lg); color: var(--c-ink); }
.lp-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); text-align: center; font-size: var(--fs-lg); }
.lp-seasons { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); width: 100%; }
.lp-seasons p { margin: 0; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); background: var(--c-surface-soft); }
.lp-digital {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: var(--r-sm);
    background: var(--c-ink);
    color: var(--c-success-soft);
    font-family: 'Courier New', monospace;
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
}
.lp-tile-clock { display: block; width: 120px; }
.lp-tile-clock .nq-clock { width: 100%; }