/* Buttons — shared across the homepage and the logged-in app pages. */

.lc-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--lc-space-sm);
    padding: 10px 20px;
    border-radius: var(--lc-radius);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

/* The native `hidden` attribute is a normal-origin UA rule, so it never
   beats this class's own `display` — an author-origin rule always wins at
   the same specificity, regardless of order. Without this, toggling
   `.hidden = true/false` on any .lc-btn (e.g. lc-wp-next) silently does
   nothing and the button stays visible. */
.lc-btn[hidden] {
    display: none;
}

.lc-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lc-btn--solid {
    background: var(--lc-orange);
    color: #fff;
}

.lc-btn--solid:hover {
    background: #db6f14;
}

.lc-btn--outline {
    border-color: var(--lc-navy);
    color: var(--lc-navy);
    background: transparent;
}

.lc-btn--outline:hover {
    background: rgba(11, 37, 69, 0.06);
}

.lc-btn--lg {
    padding: 14px 26px;
    font-size: 1rem;
}

.lc-play {
    font-size: 0.7em;
}

/* Logo mark — reused by the homepage header/footer and the app sidebar. */

.lc-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.lc-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.lc-logo__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--lc-navy);
    letter-spacing: 0.02em;
}

.lc-logo__subtitle {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--lc-gray);
}

.lc-lang-switch {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lc-navy);
}

/* Card — base container reused by block/activity/registration panels. */

.lc-card {
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-lg);
}

/* Status pills */

.lc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-pill--completed {
    background: rgba(46, 133, 64, 0.12);
    color: var(--lc-green);
}

.lc-pill--in-progress {
    background: rgba(245, 132, 38, 0.12);
    color: var(--lc-orange);
}

.lc-pill--locked {
    background: var(--lc-bg-subtle);
    color: var(--lc-text-muted);
}

.lc-pill--pending {
    background: #fff;
    border: 1px solid var(--lc-border);
    color: var(--lc-text-muted);
}

/* Progress bar */

.lc-progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--lc-bg-subtle);
    overflow: hidden;
}

.lc-progress-bar__fill {
    height: 100%;
    background: var(--lc-blue);
    border-radius: 999px;
}

/* App shell — shared topbar layout for logged-in app pages. */

.lc-app {
    display: flex;
    min-height: 100vh;
    background: var(--lc-bg-subtle);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--lc-text);
}

.lc-app *,
.lc-app *::before,
.lc-app *::after {
    box-sizing: border-box;
}

.lc-app__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 3-column grid (not flex + absolute positioning) so the centered nav stays
   in normal flow and the bar's height grows to fit it — an absolutely
   positioned nav previously collapsed the bar's height to its shortest
   remaining child and got clipped/overlapped the page below it. The two
   1fr side columns stay equal, which is what keeps the nav visually
   centered on every app page. */
.lc-app__topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--lc-space-lg);
    padding: var(--lc-space-sm) var(--lc-space-lg);
    background: #fff;
    border-bottom: 1px solid var(--lc-border);
}

.lc-app__topnav {
    grid-column: 2;
    justify-self: center;
    display: flex;
    gap: var(--lc-space-lg);
    flex-wrap: wrap;
}

.lc-app__topnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border-radius: var(--lc-radius);
    color: var(--lc-text-muted);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
}

.lc-app__topnav-item svg {
    width: 20px;
    height: 20px;
}

.lc-app__topnav-item:hover {
    color: var(--lc-navy);
}

.lc-app__topnav-item--active {
    background: rgba(0, 107, 182, 0.1);
    color: var(--lc-blue);
}

.lc-app__topnav-item--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.lc-app__topbar-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    flex-shrink: 0;
}

.lc-app__user-menu {
    position: relative;
}

.lc-app__user {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lc-navy);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.lc-app__user img {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--lc-blue);
}

.lc-app__user svg {
    width: 14px;
    height: 14px;
    color: var(--lc-text-muted);
    transition: transform 0.15s ease;
}

.lc-app__user-menu--open .lc-app__user svg {
    transform: rotate(180deg);
}

.lc-app__user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    min-width: 160px;
    padding: 6px;
    z-index: 20;
}

.lc-app__user-menu--open .lc-app__user-dropdown {
    display: block;
}

.lc-app__user-dropdown a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--lc-radius);
    color: var(--lc-navy);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.lc-app__user-dropdown a:hover {
    background: var(--lc-bg-subtle);
}

.lc-app__notify {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--lc-text-muted);
    cursor: default;
}

.lc-app__notify:hover {
    background: var(--lc-bg-subtle);
    color: var(--lc-navy);
}

.lc-app__notify svg {
    width: 18px;
    height: 18px;
}

.lc-app__main {
    flex: 1;
    padding: var(--lc-space-lg);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.lc-app__title {
    font-size: 1.6rem;
    color: var(--lc-navy);
    margin: 0 0 var(--lc-space-lg);
}

.lc-app__nav-toggle-input {
    display: none;
}

.lc-app__nav-toggle {
    display: none;
}

@media (max-width: 780px) {
    /* Grid becomes irrelevant once the nav is toggle-driven — a plain
       wrapping flex row (logo, then actions+hamburger) is enough, with the
       nav itself forced onto its own full-width line via `order` when open. */
    .lc-app__topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        /* The desktop grid's 24px `gap` carries over as a flex gap here and
           was forcing a wrap a few pixels before the content actually ran
           out of room — space-between already keeps logo/actions apart. */
        gap: 0;
        padding: var(--lc-space-sm) var(--lc-space-md);
    }

    .lc-logo {
        order: 1;
    }

    /* The full logo + full actions cluster (lang switch, user's display
       name, hamburger) don't fit next to each other on a phone-width
       screen — that pushed the actions onto their own wrapped line,
       left-aligned instead of flush right. Trimming both to their compact
       form (topbar only, not the marketing header), plus a tighter gap
       between the action icons, is enough for logo and actions to share
       one row. */
    .lc-app__topbar .lc-logo__subtitle,
    .lc-app__topbar .lc-lang-switch,
    .lc-app__topbar .lc-app__user-name {
        display: none;
    }

    .lc-app__topbar-actions {
        order: 2;
        gap: var(--lc-space-sm);
    }

    .lc-app__nav-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        cursor: pointer;
        /* Clear separation from the lang/bell/avatar cluster so it reads as
           its own control anchored at the far right, not just tacked onto
           the end of the actions group. */
        margin-left: var(--lc-space-md);
    }

    .lc-app__nav-toggle span {
        width: 22px;
        height: 2px;
        background: var(--lc-navy);
        display: block;
        border-radius: 1px;
    }

    /* Collapsed by default; the hamburger toggle (checkbox + label, no JS)
       reveals the nav as a full-width dropdown below the topbar row. */
    .lc-app__topnav {
        display: none;
        order: 3;
        width: 100%;
    }

    .lc-app__nav-toggle-input:checked ~ .lc-app__topnav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-top: var(--lc-space-md);
        padding-top: var(--lc-space-md);
        border-top: 1px solid var(--lc-border);
    }

    /* The desktop version is a small icon-above-label chip, meant for a
       horizontal bar — as a vertical dropdown list that reads as a loose
       cluster of tiny disconnected buttons rather than a menu. Lay each
       item out as a proper full-width row instead, icon beside the label. */
    .lc-app__topnav .lc-app__topnav-item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: var(--lc-space-sm);
        width: 100%;
        padding: 10px 12px;
        font-size: 0.92rem;
    }

    .lc-app__topnav .lc-app__topnav-item svg {
        width: 18px;
        height: 18px;
    }

    .lc-app__main {
        padding: var(--lc-space-md);
    }
}