/*
 * learn.css - the learning platform. Phone first, and dressed like the rest
 * of the site.
 *
 * TWO THINGS THIS FILE HAS TO GET RIGHT
 * =====================================
 * 1. It must READ AS THE SAME SITE. The payroll pages sit on a faint
 *    spreadsheet grid - "the worksheet" - with a green ledger-ruled band at
 *    the top. Both are lifted from style.css here rather than reinvented,
 *    because a flat grey background and a flat green bar is precisely what
 *    made the portal look like a different product bolted on.
 *
 * 2. It must be built for a PHONE. Every rule below is the phone rule; the
 *    desktop layout is the exception, from 900px up. Navigation on a phone is
 *    a bottom tab bar - thumb-reachable, always visible, nothing hidden in a
 *    drawer. 16px inputs, 46px targets, and the page itself never scrolls
 *    sideways.
 *
 * Self-contained: nothing here depends on style.css or portal.css, so the
 * portal cannot be broken by a change made for the payroll pages.
 */

:root {
    --g: #006400;
    --g-mid: #00520a;
    --g-dark: #003d06;
    --g-soft: #eaf4ea;
    --g-line: #cfe3cf;

    --ink: #1a231e;
    --muted: #6b7772;
    --line: #dfe7e2;
    --bg: #f6f8f6;

    /* Cards sit ON the worksheet, so they carry a soft green-tinted shadow
       rather than a hard border. A neutral grey shadow goes dirty over the
       green grid. */
    --sh-sm: 0 1px 2px rgba(0, 60, 0, 0.05), 0 2px 8px rgba(0, 60, 0, 0.05);
    --sh: 0 2px 4px rgba(0, 60, 0, 0.05), 0 6px 20px rgba(0, 60, 0, 0.08);
    --sh-lg: 0 4px 8px rgba(0, 60, 0, 0.06), 0 14px 36px rgba(0, 60, 0, 0.12);

    --warn: #92400e;
    --warn-soft: #fef6e0;
    --warn-line: #f2d99a;
    --danger: #b3261e;
    --danger-soft: #fdeceb;
    --danger-line: #f3c4c0;

    --r: 14px;
    --r-sm: 10px;
    --top-h: 58px;
    --tabs-h: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.lb {
    margin: 0;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;

    /* THE WORKSHEET - the background every other page on this site uses. */
    background-color: #f6f8f6;
    background-image: linear-gradient(to right, rgba(0, 80, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 80, 0, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    background-attachment: fixed;
    min-height: 100vh;

    padding-top: var(--top-h);
    padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
}

/* Fixed attachment janks while scrolling on iOS. style.css makes the same
   concession at the same breakpoint - it is decoration, so it yields. */
@media (max-width: 700px) {
    body.lb { background-attachment: scroll; }
}

img { max-width: 100%; height: auto; }
a { color: var(--g); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--g-dark); }

/* --- top bar ----------------------------------------------------------- */

.lb-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--top-h);

    /* The same band as the site header: one green ramp plus the ledger
       ruling, no third colour. */
    background-color: var(--g-mid);
    background-image: repeating-linear-gradient(
            to bottom, transparent 0, transparent 25px,
            rgba(255, 255, 255, 0.07) 25px, rgba(255, 255, 255, 0.07) 26px),
        repeating-linear-gradient(
            to right, transparent 0, transparent 25px,
            rgba(255, 255, 255, 0.07) 25px, rgba(255, 255, 255, 0.07) 26px),
        linear-gradient(135deg, #006400 0%, #00520a 55%, #003d06 100%);
    box-shadow: 0 2px 12px rgba(0, 45, 0, 0.22);

    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    z-index: 40;
}
.lb-brand {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
    font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
    min-width: 0;
}
.lb-brand img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
.lb-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lb-top-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.lb-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.92rem;
}
.lb-acct { text-decoration: none; }
.lb-out {
    color: rgba(255, 255, 255, 0.88); font-size: 0.82rem;
    text-decoration: none; font-weight: 500;
}
.lb-out:hover { color: #fff; }
/* Sign out is a POST form; the button keeps the old link's look. */
.lb-out-form { margin: 0; display: inline; }
button.lb-out { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.lb-top .lb-btn {
    background: rgba(255, 255, 255, 0.95); color: var(--g-dark);
    border: none; box-shadow: none; min-height: 36px;
    padding: 8px 16px; font-size: 0.88rem;
}

/* --- layout ------------------------------------------------------------ */

.lb-shell { display: block; }
.lb-side { display: none; }
.lb-main { padding: 20px 16px 32px; max-width: 900px; margin: 0 auto; }

/* --- bottom tabs (phone) ----------------------------------------------- */

.lb-tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 16px rgba(0, 60, 0, 0.06);
    display: flex;
    z-index: 40;
}
.lb-tabs a {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
    min-height: 44px;                      /* a thumb, not a 20px link */
    position: relative;
}
.lb-tabs a span { font-size: 1.2rem; line-height: 1; }
.lb-tabs a.on { color: var(--g); }
.lb-tabs a.on::before {
    content: ''; position: absolute; top: 0;
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--g);
}

/* --- type -------------------------------------------------------------- */

h1 { font-size: 1.55rem; margin: 0 0 12px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 1.12rem; margin: 26px 0 12px; letter-spacing: -0.01em; font-weight: 700; }

.lb-sub, .ln-auth-sub { color: var(--muted); margin: 0 0 18px; font-size: 0.96rem; }
.ln-note, .lb-note { color: var(--muted); font-size: 0.88rem; }
.ln-hint { display: block; color: var(--muted); font-size: 0.81rem; margin: 6px 0 0; }
.ln-more { margin-top: 16px; font-size: 0.92rem; }
.ln-section { margin: 30px 0; }
.ln-section > h2 { margin-top: 0; }

/* --- buttons ----------------------------------------------------------- */

.lb-btn, .ln-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 22px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: linear-gradient(135deg, #006e00 0%, #005107 100%);
    color: #fff;
    font-weight: 600; font-size: 1rem; font-family: inherit;
    letter-spacing: 0.01em;
    text-decoration: none; text-align: center;
    cursor: pointer;
    min-height: 48px;                       /* never smaller than a fingertip */
    box-shadow: 0 2px 6px rgba(0, 80, 0, 0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.lb-btn:hover, .ln-btn:hover { color: #fff; box-shadow: 0 6px 18px rgba(0, 80, 0, 0.26); }
.lb-btn:active, .ln-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(0, 80, 0, 0.2); }

.lb-btn-sm, .ln-btn-sm { padding: 9px 15px; font-size: 0.86rem; min-height: 38px; }

.ln-btn-primary { background: linear-gradient(135deg, #006e00 0%, #005107 100%); color: #fff; }
.ln-btn-ghost {
    background: #fff; color: var(--g); border-color: var(--g-line);
    box-shadow: var(--sh-sm);
}
.ln-btn-ghost:hover { background: var(--g-soft); color: var(--g-dark); border-color: var(--g); }
.ln-btn-danger {
    background: #fff; color: var(--danger); border-color: var(--danger-line);
    box-shadow: none;
}
.ln-btn-danger:hover { background: var(--danger-soft); color: var(--danger); box-shadow: none; }

/* --- forms ------------------------------------------------------------- */

.ln-form label {
    display: block; font-weight: 600; font-size: 0.88rem;
    margin: 18px 0 7px; color: var(--ink); letter-spacing: 0.005em;
}
.ln-form input, .ln-form select, .ln-form textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    /* 16px exactly: smaller makes iOS Safari zoom on focus and throw the
       layout sideways mid-typing. */
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ln-form input::placeholder { color: #a8b3ae; }
.ln-form input:hover, .ln-form select:hover { border-color: #c5d3cb; }
.ln-form input:focus, .ln-form select:focus, .ln-form textarea:focus {
    outline: none;
    border-color: var(--g);
    box-shadow: 0 0 0 4px rgba(0, 110, 0, 0.12);
}
.ln-form input:disabled { background: #f4f7f5; color: var(--muted); }
.ln-form button { margin-top: 24px; width: 100%; }

/* Select needs its own arrow once the native border is restyled. */
.ln-form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7772' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 17px;
    padding-right: 40px;
}

/* --- alerts and strips ------------------------------------------------- */

.alert {
    padding: 13px 16px; border-radius: var(--r-sm);
    margin-bottom: 14px; font-size: 0.92rem;
    border: 1px solid transparent;
}
.alert-success { background: var(--g-soft); color: var(--g-dark); border-color: var(--g-line); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.alert-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }

.lb-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: linear-gradient(135deg, #006e00 0%, #00520a 100%);
    border-radius: var(--r-sm);
    padding: 14px 16px; margin-bottom: 18px;
    color: #fff; text-decoration: none;
    font-size: 0.93rem; font-weight: 600;
    box-shadow: 0 3px 12px rgba(0, 80, 0, 0.2);
}
.lb-strip:hover { color: #fff; box-shadow: 0 6px 20px rgba(0, 80, 0, 0.28); }

/* --- cards, panels ----------------------------------------------------- */

.ln-auth-card, .ln-panel, .ln-card, .ln-stat, .ln-topics li,
.ln-plan, .ln-pay-steps, .ln-resource, .ln-included div, .ln-faq details,
.ln-cancel {
    background: #fff;
    border: 1px solid rgba(0, 80, 0, 0.07);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.ln-auth { display: block; }
.ln-auth-card { padding: 26px 20px; box-shadow: var(--sh); }
.ln-auth-card h1 { margin: 0 0 6px; }
.ln-auth-foot {
    margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 12px; font-size: 0.92rem;
}

/* The aside is the sales pitch, so it carries the brand band rather than a
   pale tint - it is the one confident block on an otherwise quiet page. */
.ln-auth-aside {
    background: linear-gradient(140deg, #006e00 0%, #00520a 60%, #003d06 100%);
    border-radius: var(--r);
    padding: 24px 22px;
    margin-top: 18px;
    color: #fff;
    box-shadow: var(--sh-lg);
}
.ln-auth-aside h2 { margin: 0 0 10px; font-size: 1.12rem; color: #fff; }
.ln-auth-aside p { color: rgba(255, 255, 255, 0.88); font-size: 0.93rem; margin: 0; }
.ln-auth-aside ul { list-style: none; margin: 16px 0; padding: 0; }
.ln-auth-aside li {
    margin: 9px 0; font-size: 0.92rem; padding-left: 26px; position: relative;
    color: rgba(255, 255, 255, 0.95);
}
.ln-auth-aside li::before {
    content: '\2713'; position: absolute; left: 0; top: -1px;
    color: #a7e8a7; font-weight: 700;
}
.ln-auth-aside .ln-btn {
    background: rgba(255, 255, 255, 0.96); color: var(--g-dark);
    box-shadow: none; width: 100%;
}
.ln-auth-aside .ln-btn:hover { background: #fff; color: var(--g-dark); }
.ln-price-line { font-size: 1.7rem; font-weight: 700; color: #fff; margin: 18px 0 0; }
.ln-price-line span { font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); }

.ln-panel { padding: 20px 18px; margin-bottom: 18px; }
.ln-panel > h2 { margin-top: 0; font-size: 1.05rem; }
.ln-two-col { display: grid; grid-template-columns: 1fr; gap: 18px; }

/* --- stats ------------------------------------------------------------- */

.ln-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 26px; }
.ln-stat { padding: 16px 12px; text-align: center; }
.ln-stat strong {
    display: block; font-size: 1.5rem; font-weight: 700;
    color: var(--g); line-height: 1.15; letter-spacing: -0.02em;
}
.ln-stat span { font-size: 0.76rem; color: var(--muted); }

/* --- cards ------------------------------------------------------------- */

.ln-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ln-card {
    padding: 16px;
    text-decoration: none; color: var(--ink);
    display: flex; flex-direction: column; gap: 9px;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ln-card:hover { color: var(--ink); box-shadow: var(--sh); border-color: var(--g-line); }
.ln-card:active { transform: scale(0.995); }
.ln-card.locked { opacity: 0.6; }
.ln-card strong { font-size: 1rem; line-height: 1.32; }
.ln-card small { color: var(--muted); font-size: 0.82rem; }

.ln-code {
    display: inline-block; align-self: flex-start;
    background: var(--g-soft); color: var(--g);
    padding: 3px 11px; border-radius: 20px;
    font-size: 0.73rem; font-weight: 700; letter-spacing: 0.03em;
}
.ln-code.big { font-size: 0.82rem; }

.ln-bar { display: block; height: 7px; background: #e9efeb; border-radius: 20px; overflow: hidden; }
.ln-bar i {
    display: block; height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, #00873a 0%, #006400 100%);
    transition: width 0.4s ease;
}
.ln-bar.thin { height: 5px; margin-top: 8px; }

/* --- upsell ------------------------------------------------------------ */

.ln-upsell {
    background: linear-gradient(140deg, #ffffff 0%, #f3f9f3 100%);
    border: 1px solid var(--g-line);
    border-radius: var(--r);
    padding: 20px 18px;
    margin-bottom: 22px;
    box-shadow: var(--sh-sm);
}
.ln-upsell h2 { margin: 0 0 6px; font-size: 1.08rem; color: var(--g-dark); }
.ln-upsell p { margin: 0 0 16px; color: #46584a; font-size: 0.92rem; }
.ln-upsell .ln-btn { width: 100%; }
.ln-upsell.small { padding: 15px; }
.ln-upsell.small .ln-btn { margin-top: 12px; }

.ln-continue { margin: 18px 0; }
.ln-continue > span { display: block; color: var(--muted); font-size: 0.84rem; margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ln-continue .ln-btn { width: 100%; }

/* --- paper and topics -------------------------------------------------- */

.ln-crumbs { font-size: 0.83rem; color: var(--muted); margin-bottom: 12px; }
.ln-crumbs span { margin: 0 6px; opacity: 0.6; }

.ln-paper-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ln-paper-head h1 { margin: 10px 0 4px; }
.ln-paper-head p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.ln-pct { text-align: center; flex: 0 0 auto; }
.ln-pct strong { display: block; font-size: 1.7rem; color: var(--g); font-weight: 700; letter-spacing: -0.02em; }
.ln-pct small { color: var(--muted); font-size: 0.74rem; }

.ln-topic-title { font-size: 1.35rem; margin: 8px 0 18px; letter-spacing: -0.02em; }

.ln-topics { list-style: none; margin: 22px 0; padding: 0; }
.ln-topics li { margin-bottom: 9px; overflow: hidden; transition: box-shadow 0.15s ease; }
.ln-topics li:hover { box-shadow: var(--sh); }
.ln-topics li.done { background: linear-gradient(140deg, #ffffff 0%, #f4faf4 100%); border-color: var(--g-line); }
.ln-topics li a {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 15px; text-decoration: none; color: var(--ink);
    min-height: 44px;
}
.ln-topic-n {
    width: 32px; height: 32px; flex: 0 0 32px;
    background: #eef3ef; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: var(--muted);
}
.ln-topics li.done .ln-topic-n {
    background: linear-gradient(135deg, #00873a, #006400); color: #fff;
}
.ln-topic-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ln-topic-body strong { font-size: 0.96rem; line-height: 1.35; }
.ln-topic-pct { color: var(--g); font-weight: 700; font-size: 0.88rem; flex: 0 0 auto; }
.ln-tick { font-size: 1.05rem; }

.ln-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ln-chip {
    font-size: 0.69rem; background: #f1f5f2; color: var(--muted);
    padding: 3px 9px; border-radius: 20px; font-weight: 500;
}
.ln-chip.pending { background: var(--warn-soft); color: var(--warn); }
.ln-chip.partial { background: #eef2ff; color: #4338ca; }

/* The ready / being-prepared split above a paper's lesson list. */
.ln-vsplit {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px 15px; margin-bottom: 14px; box-shadow: var(--sh-sm);
}
.ln-vsplit p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.ln-vsplit strong { color: var(--ink); }
.ln-vsplit .ln-btn { padding: 7px 13px; font-size: 0.82rem; }

/* Filter state. The lessons are hidden, never reordered - a syllabus number
   that moves is worse than a lesson that is temporarily out of view. */
.ln-topics.only-ready li[data-video='pending'] { display: none; }

.ln-prevnext { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; font-size: 0.9rem; }
.ln-prevnext a {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 13px 15px; text-decoration: none; box-shadow: var(--sh-sm);
}

/* --- player ------------------------------------------------------------ */

.ln-player-wrap { margin: 18px 0 26px; }
.ln-player {
    position: relative; background: #000;
    border-radius: var(--r); overflow: hidden;
    box-shadow: var(--sh-lg);
}
/* Portrait lessons are the common case on a phone; cap the height so the
   controls and the notes below stay on screen. */
.ln-player video { display: block; width: 100%; max-height: 70vh; background: #000; }

.ln-player-msg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; padding: 20px;
    backdrop-filter: blur(2px);
}
.ln-loading, .ln-error { color: #fff; font-size: 0.93rem; }
.ln-error { color: #fecaca; max-width: 340px; }

.ln-wm {
    position: absolute; top: 12%; left: 8%;
    pointer-events: none; user-select: none;
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.72rem; line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transition: top 2s ease, left 2s ease;
    z-index: 2;
}
.ln-wm small { display: block; font-size: 0.62rem; opacity: 0.85; }

.ln-cuts { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ln-cuts > span {
    color: var(--muted); font-size: 0.78rem; width: 100%;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.ln-cut, .ln-rate, .ln-arate {
    padding: 10px 16px; border: 1px solid var(--line); background: #fff;
    border-radius: 20px; cursor: pointer; font-size: 0.85rem; font-family: inherit;
    min-height: 40px; box-shadow: var(--sh-sm); transition: all 0.12s ease;
}
.ln-cut.on, .ln-rate.on, .ln-arate.on {
    background: linear-gradient(135deg, #006e00, #005107);
    color: #fff; border-color: transparent;
}
/* .ln-arate: the podcast's speed buttons. Same look, own class, because
   player.js binds every .ln-rate on the page to the VIDEO. */
.ln-rate, .ln-arate { padding: 10px 13px; min-width: 52px; }
.ln-player-opts { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 32px; }
/* Six speeds on one row of a 360px phone, rather than a lonely 2x below. */
@media (max-width: 480px) {
    .ln-player-opts .ln-cuts[aria-label] { gap: 6px; }
    .ln-rate, .ln-arate { padding: 8px 9px; min-width: 0; }
}

.ln-empty {
    background: var(--warn-soft); border: 1px solid var(--warn-line);
    border-radius: var(--r); padding: 17px; margin: 18px 0;
    color: var(--warn);
}
.ln-empty p { margin: 6px 0 0; font-size: 0.89rem; }

.ln-resources { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0; }
.ln-resource {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; text-decoration: none; color: var(--ink); min-height: 58px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ln-resource:hover { color: var(--ink); box-shadow: var(--sh); border-color: var(--g-line); }
.ln-resource-icon {
    font-size: 1.2rem; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 11px;
    background: var(--g-soft);
    display: flex; align-items: center; justify-content: center;
}
.ln-resource > span:last-child { min-width: 0; flex: 1; }
.ln-resource strong { display: block; font-size: 0.95rem; }
.ln-resource small { color: var(--muted); font-size: 0.82rem; }
.ln-resource-audio { cursor: default; }
.ln-resource-audio audio { width: 100%; margin-top: 9px; }

/* --- pricing ----------------------------------------------------------- */

.ln-pricing-head { text-align: center; margin-bottom: 26px; }
.ln-pricing-head h1 { font-size: 1.7rem; }
.ln-pricing-head p { color: var(--muted); margin: 0; font-size: 0.96rem; }

.ln-plans { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ln-plan { padding: 24px 20px; text-align: center; display: flex; flex-direction: column; }
.ln-plan.featured {
    border: 2px solid var(--g);
    box-shadow: var(--sh-lg);
    position: relative;
}
.ln-plan.featured::before {
    content: 'Most popular';
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #006e00, #005107); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 4px 13px; border-radius: 20px;
    white-space: nowrap;
}
.ln-plan-icon { font-size: 1.8rem; }
.ln-plan h2 { margin: 10px 0 4px; font-size: 1.2rem; }
.ln-plan-tagline { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px; }
.ln-plan-price {
    font-size: 2rem; font-weight: 700; color: var(--g);
    margin: 10px 0; letter-spacing: -0.03em;
}
.ln-plan-price span { font-size: 0.88rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ln-plan-blurb { font-size: 0.88rem; color: var(--muted); }
.ln-plan ul { list-style: none; padding: 0; margin: 18px 0; text-align: left; flex: 1; }
.ln-plan li { padding: 7px 0 7px 24px; position: relative; font-size: 0.89rem; }
.ln-plan li::before { content: '\2713'; position: absolute; left: 0; color: var(--g); font-weight: 700; }
.ln-plan .ln-btn { width: 100%; }

.ln-included { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ln-included div { padding: 16px 12px; text-align: center; }
.ln-included strong { display: block; font-size: 1.15rem; color: var(--g); font-weight: 700; }
.ln-included span { font-size: 0.77rem; color: var(--muted); }

.ln-faq { margin: 34px 0; }
.ln-faq details { padding: 15px 17px; margin-bottom: 10px; }
.ln-faq summary { cursor: pointer; font-weight: 600; font-size: 0.94rem; list-style: none; }
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary::after { content: '+'; float: right; color: var(--g); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.ln-faq details[open] summary::after { content: '\2212'; }
.ln-faq p { margin: 12px 0 0; color: var(--muted); font-size: 0.89rem; }

/* --- pay / billing ----------------------------------------------------- */

.ln-pay { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ln-pay-steps { padding: 24px 20px; }
.ln-pay-summary {
    background: linear-gradient(140deg, #006e00 0%, #00520a 60%, #003d06 100%);
    border-radius: var(--r); padding: 22px 20px; color: #fff;
    box-shadow: var(--sh-lg);
}
.ln-pay-summary h2 { margin: 0 0 6px; color: #fff; font-size: 1.1rem; }
.ln-pay-summary .ln-plan-price { color: #fff; }
.ln-pay-summary .ln-plan-price span { color: rgba(255, 255, 255, 0.8); }
.ln-pay-summary .ln-note { color: rgba(255, 255, 255, 0.78); }
.ln-pay-summary ul { list-style: none; padding: 0; margin: 14px 0 0; }
.ln-pay-summary li { padding: 6px 0 6px 22px; position: relative; font-size: 0.87rem; }
.ln-pay-summary li::before { content: '\2713'; position: absolute; left: 0; color: #a7e8a7; font-weight: 700; }

.ln-steps { list-style: none; counter-reset: step; padding: 0; margin: 22px 0; }
.ln-steps li { counter-increment: step; position: relative; padding: 0 0 20px 46px; }
.ln-steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #006e00, #005107); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.87rem;
    box-shadow: 0 2px 6px rgba(0, 80, 0, 0.22);
}
.ln-steps strong { display: block; }
.ln-steps span { color: var(--muted); font-size: 0.88rem; }

.ln-billing-status {
    background: linear-gradient(140deg, #ffffff 0%, #f2f9f2 100%);
    border: 1px solid var(--g-line);
    border-radius: var(--r); padding: 22px 20px; margin-bottom: 20px;
    box-shadow: var(--sh-sm);
}
.ln-billing-status.off { background: var(--warn-soft); border-color: var(--warn-line); }
.ln-billing-status h1 { margin: 0 0 6px; font-size: 1.2rem; }
.ln-billing-status p { margin: 0 0 16px; font-size: 0.92rem; color: #46584a; }
.ln-billing-actions .ln-btn { width: 100%; }

.ln-cancel { padding: 16px 18px; margin-bottom: 20px; }
.ln-cancel summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.ln-cancel > div { padding-top: 14px; }

/* --- tables ------------------------------------------------------------ */

/* Scroll the TABLE, not the page. A horizontally scrolling page on a phone
   is how a layout feels broken. */
.ln-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0, 80, 0, 0.07); border-radius: var(--r);
    background: #fff; box-shadow: var(--sh-sm);
}
.ln-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.86rem; }
.ln-table th, .ln-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ln-table tr:last-child td { border-bottom: none; }
.ln-table th {
    background: #f7faf8; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); font-weight: 700;
}

.ln-status { padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; text-transform: capitalize; }
.ln-status.verified, .ln-status.active, .ln-status.paid, .ln-status.matched, .ln-status.used, .ln-status.applied { background: var(--g-soft); color: var(--g); }
.ln-status.pending, .ln-status.cancelling, .ln-status.waiting, .ln-status.settling, .ln-status.partial { background: var(--warn-soft); color: var(--warn); }
.ln-status.rejected, .ln-status.expired, .ln-status.suspended, .ln-status.held { background: var(--danger-soft); color: var(--danger); }

/* =======================================================================
   DESKTOP - a sidebar replaces the bottom tab bar.
   ======================================================================= */

@media (min-width: 900px) {
    body.lb { padding-bottom: 0; }

    .lb-tabs { display: none; }

    .lb-shell { display: flex; align-items: flex-start; }

    /* The rail is a white panel floating on the worksheet, not a flat column
       of naked links. */
    .lb-side {
        display: block;
        position: sticky; top: calc(var(--top-h) + 20px);
        width: 226px; flex: 0 0 226px;
        margin: 20px 0 20px 20px;
        background: #fff;
        border: 1px solid rgba(0, 80, 0, 0.07);
        border-radius: var(--r);
        box-shadow: var(--sh-sm);
        padding: 10px;
    }
    .lb-side nav { display: flex; flex-direction: column; gap: 2px; }
    .lb-side nav a {
        padding: 11px 14px; border-radius: var(--r-sm);
        color: var(--ink); text-decoration: none;
        font-size: 0.92rem; font-weight: 500;
    }
    .lb-side nav a:hover { background: #f4f8f5; color: var(--g-dark); }
    .lb-side nav a.on {
        color: #fff; font-weight: 600;
        background: linear-gradient(135deg, #006e00, #005107);
        box-shadow: 0 2px 8px rgba(0, 80, 0, 0.22);
    }

    .lb-access {
        margin: 12px 4px 4px; padding: 13px;
        background: var(--g-soft); border-radius: var(--r-sm);
        font-size: 0.81rem; display: flex; flex-direction: column; gap: 6px;
        color: var(--g-dark);
    }
    .lb-access.off { background: var(--warn-soft); color: var(--warn); }

    .lb-main { flex: 1; min-width: 0; padding: 28px 32px 60px; max-width: 1020px; margin: 0; }

    h1 { font-size: 1.85rem; }

    .ln-auth { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; max-width: 880px; }
    .ln-auth-single { grid-template-columns: 1fr; max-width: 460px; }
    .ln-auth-card { padding: 34px 32px; }
    .ln-auth-aside { margin-top: 0; }
    .ln-auth-foot { flex-direction: row; justify-content: space-between; align-items: center; }

    .ln-stats { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .ln-stat strong { font-size: 1.7rem; }

    .ln-cards { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
    .ln-card:hover { transform: translateY(-3px); box-shadow: var(--sh); }

    .ln-upsell { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; }
    .ln-upsell p { margin: 0; }
    .ln-upsell .ln-btn, .ln-upsell.small .ln-btn { width: auto; flex: 0 0 auto; margin-top: 0; }

    .ln-continue { display: flex; align-items: center; gap: 16px; }
    .ln-continue > span { margin: 0; width: auto; }
    .ln-continue .ln-btn { width: auto; }

    .ln-plans { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 740px; margin: 0 auto; }
    /* Room for "Notes only" beside the two plans. */
    .ln-plans.has-notes { max-width: 1100px; }
    .ln-included { grid-template-columns: repeat(4, 1fr); }
    .ln-faq { max-width: 700px; margin-left: auto; margin-right: auto; }

    .ln-pay { grid-template-columns: 1fr 300px; }
    .ln-pay-steps { padding: 30px; }

    .ln-billing-status { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .ln-billing-status p { margin: 0; }
    .ln-billing-actions .ln-btn { width: auto; }

    .ln-two-col { grid-template-columns: 1fr 1fr; }
    .ln-resources { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
    .ln-prevnext { flex-direction: row; justify-content: space-between; }
    .ln-player { max-width: 900px; }
    .ln-table td, .ln-table th { white-space: normal; }
}

/* --- Paying: "confirming your payment" and balances ----------------------- */
.ln-paystate h1 { margin: 6px 0 8px; }
.ln-paystate.live h1 { color: var(--g); }
.ln-paystate.partial h1, .ln-paystate.held h1 { color: var(--warn); }
.ln-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 4px solid var(--g-soft); border-top-color: var(--g);
    animation: ln-spin 0.9s linear infinite;
}
@keyframes ln-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ln-spinner { animation-duration: 3s; } }
.ln-balance { margin: 14px 0 18px; max-width: 360px; }
.ln-balance th { text-align: left; font-weight: 500; }
.ln-balance td { text-align: right; }
.ln-balance tr.due th, .ln-balance tr.due td { font-weight: 700; color: var(--warn); }
.ln-owing {
    display: grid; gap: 6px; margin: 0 0 16px; padding: 14px 16px;
    background: var(--warn-soft); border-radius: 10px;
    border-left: 4px solid var(--warn);
}
.ln-owing .ln-btn { justify-self: start; margin-top: 4px; }

/* "Notes only" on the pricing page: the paper picker sits where the other
   cards keep their feature list's last lines, so the buttons still align. */
.ln-plan-notes .ln-notes-pick { text-align: left; margin-top: auto; }
.ln-plan-notes .ln-notes-pick label { margin-top: 0; }
.ln-plan-notes .ln-notes-pick button { margin-top: 12px; }
.ln-plan-notes ul { flex: 0 0 auto; }

/* --- Levels: papers grouped by Foundation / Intermediate / Advanced -------- */
/* A monthly plan opens ONE level, so each level's heading says whether it is
   included, and a locked level carries the button that opens it. */
.ln-level-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin: 22px 0 10px;
}
.ln-level-head h2 { margin: 0; font-size: 1.05rem; }
.ln-level-head h2 small { color: var(--muted); font-weight: 500; font-size: 0.8rem; margin-left: 4px; }
.ln-level-badge {
    padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
}
.ln-level-badge.open { background: var(--g-soft); color: var(--g); }
.ln-level-badge.locked { background: var(--warn-soft); color: var(--warn); }
.ln-level-head .ln-btn { margin-left: auto; }
.ln-programme { margin: 26px 0 0; }

/* The level picker inside the monthly plan card. */
.ln-level-pick { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.ln-level-option {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
    padding: 10px 14px; border: 1px solid var(--g-line); border-radius: var(--r-sm);
    background: #fff; color: var(--ink); text-decoration: none;
}
.ln-level-option:hover { border-color: var(--g); box-shadow: var(--sh-sm); color: var(--ink); }
.ln-level-option strong { grid-column: 1; font-size: 0.95rem; }
.ln-level-option small { grid-column: 1; color: var(--muted); font-size: 0.78rem; }
.ln-level-option span { grid-column: 2; grid-row: 1 / span 2; color: var(--g); font-weight: 600; font-size: 0.85rem; }
.ln-level-option.held { border-color: var(--g); background: var(--g-soft); }