/* [11-11-2026] The level chooser (js/level-chooser.js, lib/helpers/LevelChooser.php): the question on the first screen for a
   way in that leaks badly. A sheet of paper on the desk of the site: white with a faint blue wash, the answers as cards with
   the level in its ERK color (A1 gold, A2 green, B1 sky blue, B2 navy, as on Kennis), the intake as the site's blue pill,
   the exercise as a peach note. */

.lc
{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 18px 0;
    padding: 18px 16px 14px 16px;
    border: 1px solid #d8e4f1;
    border-radius: 10px;
    background: linear-gradient(170deg, #eef6ff 0%, #ffffff 55%, #fbf7fb 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 8px rgba(30, 60, 100, 0.10);
    font-family: inherit;
    color: #23324a;
    text-align: left;
}

    .lc *
    {
        box-sizing: border-box;
    }

    .lc .lc-kicker
    {
        margin: 0 0 6px 0;
        color: #d01592;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.02em;
    }

    .lc h2
    {
        margin: 0 0 6px 0;
        padding: 0;
        border: 0;
        background: none;
        color: #2b3f93;
        font-size: 25px;
        line-height: 1.15;
    }

    .lc .lc-sub
    {
        margin: 0 0 14px 0;
        color: #4a5a70;
        font-size: 14px;
        line-height: 1.4;
    }

.lc-answers
{
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    a.lc-answer
    {
        position: relative;
        display: block;
        min-height: 58px;
        padding: 9px 30px 9px 74px;
        border: 1px solid #d3dce8;
        border-radius: 9px;
        background: linear-gradient(#ffffff, #f6f9fc);
        box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgba(30, 60, 100, 0.10);
        color: #1f2d44;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    a.lc-answer:hover, a.lc-answer:focus-visible
    {
        border-color: #7fa9d8;
        box-shadow: inset 0 1px 0 #ffffff, 0 2px 7px rgba(30, 70, 130, 0.18);
    }

    a.lc-answer:active
    {
        background: #eef4fb;
        box-shadow: inset 0 1px 3px rgba(30, 60, 100, 0.15);
    }

    /* the chevron at the end: this is a way somewhere */
    a.lc-answer::after
    {
        content: "";
        position: absolute;
        top: 50%;
        right: 13px;
        width: 8px;
        height: 8px;
        margin-top: -5px;
        border-top: 2px solid #4f8fd6;
        border-right: 2px solid #4f8fd6;
        transform: rotate(45deg);
    }

    a.lc-answer b
    {
        display: block;
        font-size: 15.5px;
        line-height: 1.25;
    }

    a.lc-answer small
    {
        display: block;
        margin-top: 2px;
        color: #2f6cb5;
        font-size: 12.5px;
    }

    /* the level as a label on the card, in its ERK color */
    .lc-lv
    {
        position: absolute;
        top: 50%;
        left: 10px;
        width: 54px;
        margin-top: -12px;
        padding: 4px 0;
        border: 1px solid transparent;
        border-radius: 6px;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
        text-align: center;
        white-space: nowrap;
    }

    .lc-lv.lv-A1 { background: linear-gradient(#fbd45c, #efb31f); border-color: #efb31f; color: #744a00; }
    .lc-lv.lv-A2 { background: linear-gradient(#379637, #1f761f); border-color: #1f761f; color: #ffffff; }
    .lc-lv.lv-B1 { background: linear-gradient(#2a9ad8, #127fba); border-color: #127fba; color: #ffffff; }
    .lc-lv.lv-B2 { background: linear-gradient(#2f4aa8, #1b2c7a); border-color: #1b2c7a; color: #ffffff; }

/* the free intake: the blue pill of the site's intake card, as wide as the answers */
a.lc-intake
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 12px 0 0 0;
    padding: 11px 14px;
    border: 1px solid #2c5f9e;
    border-radius: 999px;
    background: linear-gradient(#8fbff0 0, #4f8fd6 45%, #2f6cb5 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 5px rgba(30, 70, 130, 0.2);
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(20, 50, 100, 0.35);
}

    a.lc-intake img
    {
        width: 24px;
        height: 24px;
        margin: -4px 0;
        filter: drop-shadow(0 1px 1px rgba(20, 50, 100, 0.3));
    }

/* C: the exercise, a peach note as the game box of the course pages */
button.lc-try
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 12px 0 0 0;
    padding: 10px 12px;
    border: 1px dashed #e6a988;
    border-radius: 9px;
    background: #fff1e8;
    color: #8a3d12;
    font: inherit;
    font-size: 14.5px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}

    /* a little clock face, drawn: half past */
    .lc-clock
    {
        position: relative;
        flex: 0 0 26px;
        height: 26px;
        border: 2px solid #8a3d12;
        border-radius: 50%;
        background: #ffffff;
    }

    .lc-clock::before, .lc-clock::after
    {
        content: "";
        position: absolute;
        left: 50%;
        width: 2px;
        margin-left: -1px;
        background: #8a3d12;
        transform-origin: 50% 100%;
    }

    .lc-clock::before { top: 3px; height: 8px; }
    .lc-clock::after { top: 6px; height: 5px; transform: rotate(75deg); }

.lc .lc-more
{
    margin: 12px 0 0 0;
    color: #8090a5;
    font-size: 13px;
    text-align: center;
}

    .lc .lc-more a
    {
        color: #2f6cb5;
    }

/* a small phone: all of it on the first screen of 360 by 800, the intake too */
@media (max-width: 380px)
{
    .lc { padding: 14px 12px 10px 12px; }
    .lc h2 { font-size: 23px; }
    .lc .lc-sub { margin-bottom: 10px; font-size: 13px; }
    .lc-answers { gap: 7px; }
    a.lc-answer { min-height: 52px; padding-top: 7px; padding-bottom: 7px; padding-left: 70px; }
    a.lc-answer b { font-size: 14.5px; }
    .lc-lv { width: 50px; left: 9px; }
    button.lc-try, a.lc-intake { margin-top: 9px; padding-top: 9px; padding-bottom: 9px; }
}

/* the in-app browser: the question is all there is on the first screen, so a little more air */
@media (min-width: 381px)
{
    .lc.lc-instagram h2, .lc.lc-facebook h2
    {
        font-size: 27px;
    }
}

/* a computer: a band above the content, the answers side by side, not a whole screen */
.lc.lc-computer
{
    margin: 4px 0 22px 0;
    padding: 18px 20px 14px 20px;
}

    .lc.lc-computer .lc-answers
    {
        flex-direction: row;
    }

    .lc.lc-computer a.lc-answer
    {
        flex: 1 1 0;
        padding: 40px 26px 10px 12px;
    }

    .lc.lc-computer .lc-lv
    {
        top: 10px;
        margin-top: 0;
        left: 12px;
    }

    /* the chevron in the corner, under the course */
    .lc.lc-computer a.lc-answer::after
    {
        top: auto;
        bottom: 16px;
    }

    .lc.lc-computer a.lc-intake, .lc.lc-computer button.lc-try
    {
        align-self: flex-start;
        width: auto;
        padding-right: 22px;
        padding-left: 18px;
    }

    .lc.lc-computer .lc-more
    {
        text-align: left;
    }

/* the sheet with the exercise: the whole screen on a phone, a paper in the middle on a computer */
html.lc-open, html.lc-open body
{
    overflow: hidden;
}

.lc-sheet
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(35, 50, 74, 0.45);
}

    .lc-sheet[hidden]
    {
        display: none;
    }

    .lc-paper
    {
        box-sizing: border-box;
        max-width: 640px;
        min-height: 100%;
        margin: 0 auto;
        padding: 0 14px 24px 14px;
        background: #ffffff;
        color: #23324a;
    }

    .lc-head
    {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 -14px 10px -14px;
        padding: 10px 14px;
        border-bottom: 1px solid #e3e9f1;
        background: linear-gradient(#ffffff, #f3f7fb);
    }

        .lc-head h2
        {
            margin: 0;
            border: 0;
            color: #2b3f93;
            font-size: 17px;
        }

    button.lc-close
    {
        padding: 6px 12px;
        border: 1px solid #c8d4e2;
        border-radius: 999px;
        background: #ffffff;
        color: #2f6cb5;
        font: inherit;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

    .lc-explain
    {
        margin: 0 0 10px 0;
        font-size: 14.5px;
        line-height: 1.45;
    }

    .lc-after
    {
        margin: 18px 0 0 0;
        padding: 14px 12px;
        border: 1px solid #d8e4f1;
        border-radius: 10px;
        background: linear-gradient(170deg, #eef6ff 0%, #ffffff 70%);
        transition: box-shadow 0.4s;
    }

        .lc-after h3
        {
            margin: 0 0 10px 0;
            color: #2b3f93;
            font-size: 18px;
        }

        .lc-after.lc-lit
        {
            box-shadow: 0 0 0 3px #f7c6e2;
        }

@media (min-width: 700px)
{
    .lc-paper
    {
        min-height: 0;
        margin: 30px auto;
        border-radius: 10px;
        box-shadow: 0 10px 40px rgba(20, 40, 70, 0.3);
    }
}

/* what was decided and told, with ?debug=1 */
.lc-debug
{
    position: fixed;
    right: 6px;
    bottom: 6px;
    z-index: 10001;
    max-width: 340px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(20, 30, 50, 0.85);
    color: #d6f5d6;
    font: 11px/1.35 monospace;
    white-space: pre-wrap;
    pointer-events: none;
}