/* =========================================================
   RADIANS VS DEGREES GUIDE
   ========================================================= */

:root
{
    --rvd-navy: #0f172a;
    --rvd-slate: #475569;
    --rvd-muted: #64748b;

    --rvd-border: #d7e2ec;

    --rvd-white: #ffffff;
    --rvd-surface: #f8fafc;

    --rvd-teal: #0f766e;
    --rvd-teal-bright: #159e9c;
    --rvd-teal-soft: #ecfdf5;

    --rvd-blue: #2563eb;
    --rvd-blue-soft: #eff6ff;

    --rvd-gold: #d97706;
    --rvd-gold-soft: #fff7ed;

    --rvd-shadow:
        0 1rem 2.5rem
        rgba(
            15,
            23,
            42,
            0.08
        );

    --rvd-shadow-small:
        0 0.75rem 2rem
        rgba(
            15,
            23,
            42,
            0.06
        );
}


/* =========================================================
   BASE
   ========================================================= */

.rvd-intro,
.rvd-section,
.rvd-core-card,
.rvd-related-section
{
    color:
        var(--rvd-slate);

    font-family:
        Inter,
        Arial,
        sans-serif;
}

#radians-vs-degrees-guide
{
    scroll-margin-top: 5rem;
}

.rvd-intro h2,
.rvd-section-heading h2,
.rvd-core-card h2,
.rvd-practice-panel h2,
.rvd-related-section h2,
.rvd-summary-card h2
{
    color:
        var(--rvd-navy);

    font-weight: 800;

    letter-spacing: -0.03em;

    line-height: 1.15;
}

.rvd-intro h2,
.rvd-section-heading h2,
.rvd-core-card h2
{
    font-size:
        clamp(
            1.8rem,
            4vw,
            2.55rem
        );
}

.rvd-intro .lead
{
    margin-bottom: 0;

    color:
        var(--rvd-slate);

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.2rem
        );

    line-height: 1.75;
}

.rvd-section
{
    margin-top:
        clamp(
            3.5rem,
            7vw,
            5.5rem
        );
}

.rvd-section-heading
{
    max-width: 50rem;

    margin-bottom: 1.5rem;
}

.rvd-section-heading p
{
    margin-top: 0.75rem;
    margin-bottom: 0;

    font-size: 1.02rem;

    line-height: 1.75;
}

.rvd-eyebrow,
.rvd-example-label,
.rvd-rule-label
{
    margin:
        0
        0
        0.45rem;

    color:
        var(--rvd-teal);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================================
   CORE RELATIONSHIP CARD
   ========================================================= */

.rvd-core-card
{
    padding:
        clamp(
            1.5rem,
            4vw,
            2.25rem
        );

    background:
        linear-gradient(
            135deg,
            var(--rvd-teal-soft),
            var(--rvd-blue-soft)
        );

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.22
        );

    border-radius: 1.35rem;

    box-shadow:
        var(--rvd-shadow);
}

.rvd-main-equivalence
{
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    gap: 1rem;

    align-items: center;

    margin-top: 1.75rem;

    padding:
        clamp(
            1.1rem,
            3vw,
            1.6rem
        );

    background:
        rgba(
            255,
            255,
            255,
            0.84
        );

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            0.28
        );

    border-radius: 1rem;
}

.rvd-equivalence-side
{
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    text-align: center;
}

.rvd-equivalence-label
{
    color:
        var(--rvd-muted);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.rvd-equivalence-side strong
{
    color:
        var(--rvd-teal);

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.65rem
        );

    font-weight: 800;
}

.rvd-equivalence-equals
{
    color:
        var(--rvd-navy);

    font-size: 1.6rem;
    font-weight: 800;
}

.rvd-full-turn
{
    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem 0.75rem;

    align-items: center;
    justify-content: center;

    margin-top: 1rem;

    padding: 0.9rem 1rem;

    color:
        var(--rvd-slate);

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    border-radius: 0.85rem;
}

.rvd-full-turn strong
{
    color:
        var(--rvd-navy);
}


/* =========================================================
   CONVERSION CARDS
   ========================================================= */

.rvd-conversion-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1.25rem;
}

.rvd-conversion-card
{
    position: relative;

    padding:
        clamp(
            1.35rem,
            3vw,
            1.8rem
        );

    overflow: hidden;

    background:
        var(--rvd-white);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 1.2rem;

    box-shadow:
        var(--rvd-shadow-small);
}

.rvd-conversion-number
{
    display: grid;

    width: 2.5rem;
    height: 2.5rem;

    margin-bottom: 1rem;

    place-items: center;

    color:
        var(--rvd-white);

    font-size: 0.9rem;
    font-weight: 800;

    background:
        var(--rvd-teal);

    border-radius: 50%;
}

.rvd-conversion-card h3
{
    margin:
        0
        0
        0.55rem;

    color:
        var(--rvd-navy);

    font-size: 1.3rem;
    font-weight: 800;

    line-height: 1.3;
}

.rvd-conversion-card > p
{
    color:
        var(--rvd-slate);

    line-height: 1.65;
}

.rvd-rule-note
{
    margin-bottom: 0 !important;

    color:
        var(--rvd-muted) !important;

    font-size: 0.9rem;
}


/* =========================================================
   FORMULA BOX
   ========================================================= */

.rvd-formula-box
{
    display: grid;

    min-height: 4.8rem;

    margin:
        1rem
        0;

    padding:
        0.8rem
        1rem;

    place-items: center;

    color:
        var(--rvd-teal);

    font-size:
        clamp(
            1.15rem,
            2.5vw,
            1.45rem
        );

    font-weight: 800;

    overflow-x: auto;

    background:
        var(--rvd-teal-soft);

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.2
        );

    border-radius: 0.85rem;
}

.rvd-formula-box mjx-container
{
    margin: 0 !important;
}


/* =========================================================
   TIPS
   ========================================================= */

.rvd-tip-card
{
    display: flex;

    gap: 1rem;

    align-items: flex-start;

    padding:
        1.2rem
        1.3rem;

    background:
        var(--rvd-teal-soft);

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.24
        );

    border-radius: 1rem;
}

.rvd-tip-icon
{
    display: grid;

    flex:
        0
        0
        2.75rem;

    width: 2.75rem;
    height: 2.75rem;

    place-items: center;

    color:
        var(--rvd-teal);

    background:
        rgba(
            20,
            184,
            166,
            0.13
        );

    border-radius: 0.8rem;
}

.rvd-tip-title
{
    margin:
        0
        0
        0.25rem;

    color:
        var(--rvd-navy);

    font-weight: 800;
}

.rvd-tip-card p
{
    color:
        var(--rvd-slate);

    line-height: 1.65;
}

.rvd-tip-card a
{
    color:
        var(--rvd-teal);

    font-weight: 700;
}


/* =========================================================
   WORKED EXAMPLES
   ========================================================= */

.rvd-example-card
{
    margin-top: 1.25rem;

    padding:
        clamp(
            1.3rem,
            3.5vw,
            2rem
        );

    background:
        var(--rvd-white);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 1.2rem;

    box-shadow:
        var(--rvd-shadow-small);
}

.rvd-example-heading
{
    display: flex;

    gap: 1rem;

    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 1.2rem;
}

.rvd-example-heading h3
{
    margin: 0;

    color:
        var(--rvd-navy);

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.65rem
        );

    font-weight: 800;

    line-height: 1.3;
}

.rvd-example-type
{
    flex: 0 0 auto;

    padding:
        0.42rem
        0.72rem;

    color:
        var(--rvd-blue);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    background:
        var(--rvd-blue-soft);

    border-radius: 999px;
}


/* =========================================================
   EQUATION STEPS
   ========================================================= */

.rvd-equation-steps
{
    display: grid;

    gap: 0.75rem;

    margin-top: 1rem;
}

.rvd-equation-row
{
    display: grid;

    grid-template-columns:
        minmax(10rem, 0.8fr)
        minmax(0, 1.2fr);

    gap: 1rem;

    align-items: center;

    min-height: 4.75rem;

    padding:
        0.85rem
        1rem;

    overflow-x: auto;

    color:
        var(--rvd-teal);

    background:
        var(--rvd-surface);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 0.85rem;
}

.rvd-equation-note
{
    color:
        var(--rvd-slate);

    font-size: 0.88rem;
    font-weight: 700;

    line-height: 1.45;
}

.rvd-equation-row mjx-container
{
    margin: 0 !important;

    text-align: center !important;
}


/* =========================================================
   ANSWER BOX
   ========================================================= */

.rvd-answer-box
{
    display: flex;

    gap: 1rem;

    align-items: center;
    justify-content: space-between;

    margin-top: 1.1rem;

    padding:
        0.95rem
        1.15rem;

    color:
        var(--rvd-teal);

    font-size: 1.05rem;
    font-weight: 800;

    background:
        var(--rvd-teal-soft);

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.25
        );

    border-radius: 0.85rem;
}

.rvd-answer-box > span
{
    color:
        var(--rvd-navy);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.rvd-answer-box mjx-container
{
    margin: 0 !important;
}


/* =========================================================
   COMMON ANGLE TABLE
   ========================================================= */

.rvd-angle-table-wrap
{
    width: 100%;

    overflow-x: auto;

    background:
        var(--rvd-white);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 1.1rem;

    box-shadow:
        var(--rvd-shadow-small);
}

.rvd-angle-table
{
    width: 100%;

    min-width: 34rem;

    border-collapse: collapse;
}

.rvd-angle-table th,
.rvd-angle-table td
{
    padding:
        0.9rem
        1rem;

    text-align: center;

    border-bottom:
        1px solid
        var(--rvd-border);
}

.rvd-angle-table thead th
{
    color:
        var(--rvd-white);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    background:
        var(--rvd-navy);
}

.rvd-angle-table tbody td
{
    color:
        var(--rvd-navy);

    font-weight: 700;
}

.rvd-angle-table tbody tr:nth-child(even)
{
    background:
        var(--rvd-surface);
}

.rvd-angle-table tbody tr:last-child td
{
    border-bottom: 0;
}


/* =========================================================
   COTERMINAL RULES
   ========================================================= */

.rvd-coterminal-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1.25rem;

    margin-bottom: 1.5rem;
}

.rvd-rule-card
{
    padding:
        clamp(
            1.3rem,
            3vw,
            1.75rem
        );

    background:
        var(--rvd-white);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 1.1rem;

    box-shadow:
        var(--rvd-shadow-small);
}

.rvd-rule-card h3
{
    margin:
        0
        0
        0.75rem;

    color:
        var(--rvd-navy);

    font-size: 1.2rem;
    font-weight: 800;

    line-height: 1.35;
}

.rvd-rule-card > p:last-child
{
    margin-bottom: 0;

    color:
        var(--rvd-muted);

    font-size: 0.9rem;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.rvd-summary-card
{
    padding:
        clamp(
            1.4rem,
            4vw,
            2rem
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                236,
                253,
                245,
                0.9
            ),
            rgba(
                239,
                246,
                255,
                0.88
            )
        );

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.22
        );

    border-radius: 1.25rem;
}

.rvd-summary-card h2
{
    margin-bottom: 1.3rem;

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );
}

.rvd-summary-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1rem;
}

.rvd-summary-grid article
{
    display: flex;

    gap: 0.8rem;

    align-items: flex-start;

    padding: 1rem;

    background:
        rgba(
            255,
            255,
            255,
            0.8
        );

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            0.26
        );

    border-radius: 0.9rem;
}

.rvd-summary-grid article > span
{
    display: grid;

    flex:
        0
        0
        2rem;

    width: 2rem;
    height: 2rem;

    place-items: center;

    color:
        var(--rvd-white);

    font-size: 0.8rem;
    font-weight: 800;

    background:
        var(--rvd-teal);

    border-radius: 50%;
}

.rvd-summary-grid h3
{
    margin: 0;

    color:
        var(--rvd-navy);

    font-size: 0.95rem;
    font-weight: 800;
}

.rvd-summary-grid p
{
    margin:
        0.4rem
        0
        0;

    color:
        var(--rvd-teal);
}

.rvd-summary-grid mjx-container
{
    margin: 0 !important;
}


/* =========================================================
   COMMON MISTAKES
   ========================================================= */

.rvd-mistakes-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1rem;
}

.rvd-mistake-card
{
    padding: 1.25rem;

    background:
        var(--rvd-white);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 1rem;

    box-shadow:
        var(--rvd-shadow-small);
}

.rvd-mistake-icon
{
    display: grid;

    width: 2.75rem;
    height: 2.75rem;

    margin-bottom: 0.9rem;

    place-items: center;

    color:
        var(--rvd-gold);

    background:
        var(--rvd-gold-soft);

    border-radius: 0.8rem;
}

.rvd-mistake-card h3
{
    margin:
        0
        0
        0.5rem;

    color:
        var(--rvd-navy);

    font-size: 1.05rem;
    font-weight: 800;

    line-height: 1.35;
}

.rvd-mistake-card p
{
    margin: 0;

    color:
        var(--rvd-slate);

    font-size: 0.92rem;

    line-height: 1.65;
}


/* =========================================================
   PRACTICE PANEL
   ========================================================= */

.rvd-practice-panel
{
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        auto;

    gap: 1.5rem;

    align-items: center;

    padding:
        clamp(
            1.5rem,
            4vw,
            2.25rem
        );

    background:
        var(--rvd-navy);

    border-radius: 1.3rem;

    box-shadow:
        var(--rvd-shadow);
}

.rvd-practice-panel h2
{
    margin:
        0
        0
        0.7rem;

    color:
        var(--rvd-white);

    font-size:
        clamp(
            1.5rem,
            3vw,
            2rem
        );
}

.rvd-practice-panel p
{
    margin: 0;

    color:
        #cbd5e1;

    line-height: 1.7;
}

.rvd-practice-panel .rvd-eyebrow
{
    color: #5eead4;
}

.rvd-practice-actions
{
    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;
}


/* =========================================================
   RELATED RESOURCES
   ========================================================= */

.rvd-related-section
{
    margin-top:
        clamp(
            3.5rem,
            7vw,
            6rem
        );
}

.rvd-related-section h2
{
    margin:
        0
        0
        0.6rem;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.5rem
        );
}

.rvd-related-section > p
{
    max-width: 46rem;

    color:
        var(--rvd-slate);

    font-size: 1.02rem;

    line-height: 1.7;
}

.rvd-related-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1.1rem;
}

.rvd-related-card
{
    display: flex;

    flex-direction: column;

    min-height: 100%;

    padding: 1.25rem;

    color:
        var(--rvd-navy);

    text-decoration: none;

    background:
        var(--rvd-white);

    border:
        1px solid
        var(--rvd-border);

    border-radius: 1.1rem;

    box-shadow:
        var(--rvd-shadow-small);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.rvd-related-card:hover
{
    color:
        var(--rvd-navy);

    text-decoration: none;

    border-color:
        rgba(
            13,
            148,
            136,
            0.5
        );

    box-shadow:
        var(--rvd-shadow);

    transform:
        translateY(-3px);
}

.rvd-related-icon
{
    display: grid;

    width: 2.8rem;
    height: 2.8rem;

    margin-bottom: 0.9rem;

    place-items: center;

    color:
        var(--rvd-teal);

    background:
        var(--rvd-teal-soft);

    border-radius: 0.8rem;
}

.rvd-related-card h3
{
    margin:
        0
        0
        0.45rem;

    color: inherit;

    font-size: 1.03rem;
    font-weight: 800;

    line-height: 1.35;
}

.rvd-related-card p
{
    margin: 0;

    color:
        var(--rvd-slate);

    font-size: 0.9rem;

    line-height: 1.6;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.rvd-tip-card a:focus-visible,
.rvd-practice-actions a:focus-visible,
.rvd-related-card:focus-visible
{
    outline:
        3px solid
        rgba(
            37,
            99,
            235,
            0.38
        );

    outline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px)
{
    .rvd-summary-grid
    {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .rvd-related-grid
    {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .rvd-practice-panel
    {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px)
{
    .rvd-section
    {
        margin-top: 3.5rem;
    }

    .rvd-intro .lead,
    .rvd-section-heading p
    {
        font-size: 1rem;

        line-height: 1.7;
    }


    /* -----------------------------------------
       Core relationship
       ----------------------------------------- */

    .rvd-core-card
    {
        padding: 1.25rem;

        border-radius: 1.05rem;
    }

    .rvd-main-equivalence
    {
        grid-template-columns: 1fr;

        gap: 0.6rem;

        padding: 1rem;
    }

    .rvd-equivalence-equals
    {
        font-size: 1.25rem;
    }

    .rvd-full-turn
    {
        flex-direction: column;

        align-items: flex-start;
    }


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

    .rvd-conversion-grid,
    .rvd-coterminal-grid,
    .rvd-mistakes-grid
    {
        grid-template-columns: 1fr;
    }

    .rvd-conversion-card,
    .rvd-rule-card,
    .rvd-mistake-card
    {
        padding: 1.15rem;
    }


    /* -----------------------------------------
       Examples
       ----------------------------------------- */

    .rvd-example-card
    {
        padding: 1.15rem;

        border-radius: 1rem;
    }

    .rvd-example-heading
    {
        flex-direction: column;

        gap: 0.75rem;
    }

    .rvd-example-type
    {
        align-self: flex-start;
    }


    /* -----------------------------------------
       Equation steps
       ----------------------------------------- */

    .rvd-equation-row
    {
        grid-template-columns: 1fr;

        gap: 0.45rem;

        min-height: auto;

        padding: 0.9rem;
    }

    .rvd-equation-note
    {
        text-align: center;
    }

    .rvd-equation-row mjx-container
    {
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;
    }


    /* -----------------------------------------
       Answers
       ----------------------------------------- */

    .rvd-answer-box
    {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;

        width: 100%;

        min-width: 0;
    }

    .rvd-answer-box mjx-container
    {
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;
    }


    /* -----------------------------------------
       Table
       ----------------------------------------- */

    .rvd-angle-table-wrap
    {
        border-radius: 0.9rem;
    }

    .rvd-angle-table
    {
        min-width: 31rem;
    }

    .rvd-angle-table th,
    .rvd-angle-table td
    {
        padding:
            0.8rem
            0.75rem;

        font-size: 0.9rem;
    }


    /* -----------------------------------------
       Summary
       ----------------------------------------- */

    .rvd-summary-card
    {
        padding: 1.2rem;

        border-radius: 1rem;
    }

    .rvd-summary-grid
    {
        grid-template-columns: 1fr;

        gap: 0.75rem;
    }


    /* -----------------------------------------
       Tip
       ----------------------------------------- */

    .rvd-tip-card
    {
        padding: 1rem;
    }


    /* -----------------------------------------
       Practice
       ----------------------------------------- */

    .rvd-practice-panel
    {
        padding: 1.3rem;

        border-radius: 1.05rem;
    }

    .rvd-practice-actions
    {
        display: grid;

        grid-template-columns: 1fr;
    }

    .rvd-practice-actions .btn
    {
        width: 100%;

        justify-content: center;
    }


    /* -----------------------------------------
       Related
       ----------------------------------------- */

    .rvd-related-grid
    {
        grid-template-columns: 1fr;
    }

    .rvd-related-card
    {
        padding: 1.1rem;
    }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 399.98px)
{
    .rvd-core-card,
    .rvd-example-card,
    .rvd-practice-panel
    {
        padding: 1rem;
    }

    .rvd-formula-box
    {
        padding:
            0.7rem
            0.6rem;
    }

    .rvd-equation-row
    {
        padding: 0.8rem;
    }

    .rvd-tip-card
    {
        flex-direction: column;
    }

    .rvd-angle-table
    {
        min-width: 29rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce)
{
    .rvd-related-card
    {
        transition: none;
    }

    .rvd-related-card:hover
    {
        transform: none;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print
{
    .rvd-practice-panel,
    .rvd-related-section
    {
        display: none !important;
    }

    .rvd-core-card,
    .rvd-conversion-card,
    .rvd-example-card,
    .rvd-rule-card,
    .rvd-summary-card,
    .rvd-mistake-card
    {
        break-inside: avoid;

        box-shadow: none;
    }

    .rvd-angle-table-wrap
    {
        overflow: visible;

        box-shadow: none;
    }

    .rvd-angle-table
    {
        min-width: 0;
    }
}