/* =========================================================
   UNIT CONVERSION CHART
   ========================================================= */

:root
{
    --ucc-navy: #102a43;
    --ucc-navy-dark: #081c2f;

    --ucc-blue: #1f6f8b;

    --ucc-teal: #159a9c;
    --ucc-teal-dark: #117b7d;

    --ucc-green: #198754;
    --ucc-green-dark: #157347;

    --ucc-red: #c0392b;

    --ucc-orange: #d97706;

    --ucc-purple: #6f42c1;

    --ucc-light: #f5f8fb;
    --ucc-lighter: #fbfcfe;

    --ucc-border: #dbe5ee;

    --ucc-text: #243b53;
    --ucc-muted: #627d98;

    --ucc-white: #ffffff;

    --ucc-shadow:
        0 18px 45px rgba(16, 42, 67, 0.12);

    --ucc-shadow-small:
        0 8px 24px rgba(16, 42, 67, 0.09);
}


/* =========================================================
   GENERAL
   ========================================================= */

.unit-conversion-chart-page
{
    background:
        var(--ucc-white);

    color:
        var(--ucc-text);

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


.unit-conversion-chart-page *,
.unit-conversion-chart-page *::before,
.unit-conversion-chart-page *::after
{
    box-sizing:
        border-box;
}


.unit-conversion-chart-page button,
.unit-conversion-chart-page input
{
    font-family:
        inherit;
}


.unit-conversion-chart-page button
{
    cursor:
        pointer;
}


.ucc-shell
{
    width:
        min(100%, 1180px);

    margin:
        0 auto;
}


.ucc-eyebrow
{
    margin:
        0 0 0.5rem;

    color:
        var(--ucc-teal-dark);

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* =========================================================
   INTRO SECTION
   ========================================================= */

.ucc-intro-section
{
    padding:
        4rem 0 2rem;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--ucc-light) 100%
        );
}


.ucc-intro-grid
{
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    gap:
        2rem;

    align-items:
        center;
}


.ucc-intro-grid h2
{
    margin:
        0 0 0.8rem;

    color:
        var(--ucc-navy);

    font-size:
        clamp(1.7rem, 3vw, 2.25rem);

    font-weight:
        800;
}


.ucc-intro-copy
{
    max-width:
        760px;

    margin:
        0;

    color:
        var(--ucc-muted);

    font-size:
        1rem;

    line-height:
        1.7;
}


/* =========================================================
   DOWNLOAD CARD
   ========================================================= */

.ucc-download-card
{
    display:
        grid;

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

    gap:
        1rem;

    align-items:
        center;

    padding:
        1.2rem;

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

    border-radius:
        1rem;

    background:
        var(--ucc-white);

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


.ucc-download-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    border-radius:
        0.9rem;

    background:
        rgba(21, 154, 156, 0.1);

    color:
        var(--ucc-teal-dark);

    font-size:
        1.2rem;
}


.ucc-download-card strong
{
    display:
        block;

    margin-bottom:
        0.2rem;

    color:
        var(--ucc-navy);

    font-size:
        0.95rem;

    font-weight:
        800;
}


.ucc-download-card p
{
    margin:
        0;

    color:
        var(--ucc-muted);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


.ucc-download-button
{
    grid-column:
        1 / -1;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0.65rem 0.9rem;

    border-radius:
        0.75rem;

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

    color:
        var(--ucc-white);

    font-size:
        0.82rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}


.ucc-download-button:hover
{
    transform:
        translateY(-1px);

    color:
        var(--ucc-white);

    filter:
        brightness(1.04);

    box-shadow:
        0 8px 20px rgba(21, 154, 156, 0.2);
}


/* =========================================================
   CHART SECTION
   ========================================================= */

.ucc-chart-section
{
    padding:
        2.5rem 0 5rem;

    background:
        var(--ucc-light);
}


/* =========================================================
   SEARCH CARD
   ========================================================= */

.ucc-search-card
{
    position:
        relative;

    margin-bottom:
        1.25rem;

    padding:
        1.2rem;

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

    border-radius:
        1rem;

    background:
        var(--ucc-white);

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


.ucc-search-label
{
    display:
        block;

    margin-bottom:
        0.5rem;

    color:
        var(--ucc-navy);

    font-size:
        0.86rem;

    font-weight:
        800;
}


.ucc-search-box
{
    display:
        grid;

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

    align-items:
        center;

    gap:
        0.7rem;

    min-height:
        54px;

    padding:
        0 0.95rem;

    border:
        2px solid var(--ucc-border);

    border-radius:
        0.85rem;

    background:
        var(--ucc-lighter);

    color:
        var(--ucc-muted);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


.ucc-search-box:focus-within
{
    border-color:
        var(--ucc-teal);

    background:
        var(--ucc-white);

    box-shadow:
        0 0 0 4px rgba(21, 154, 156, 0.12);
}


.ucc-search-box input
{
    width:
        100%;

    min-height:
        50px;

    border:
        0;

    background:
        transparent;

    color:
        var(--ucc-navy-dark);

    font-size:
        0.95rem;

    font-weight:
        600;

    outline:
        none;
}


.ucc-search-box input::placeholder
{
    color:
        #8aa0b5;
}


.ucc-clear-search
{
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    padding:
        0;

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

    border-radius:
        50%;

    background:
        var(--ucc-white);

    color:
        var(--ucc-muted);
}


.ucc-clear-search:hover
{
    border-color:
        rgba(21, 154, 156, 0.5);

    color:
        var(--ucc-teal-dark);
}


.ucc-search-status
{
    margin:
        0.65rem 0 0;

    color:
        var(--ucc-muted);

    font-size:
        0.76rem;

    font-weight:
        650;
}


/* =========================================================
   CATEGORY TABS
   ========================================================= */

.ucc-tabs
{
    position:
        sticky;

    top:
        0;

    z-index:
        30;

    display:
        flex;

    gap:
        0.55rem;

    width:
        100%;

    margin-bottom:
        1.35rem;

    padding:
        0.9rem;

    overflow-x:
        auto;

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

    border-radius:
        1rem;

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

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

    backdrop-filter:
        blur(10px);

    scrollbar-width:
        thin;
}


.ucc-tab
{
    flex:
        0 0 auto;

    min-height:
        40px;

    padding:
        0.55rem 0.85rem;

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

    border-radius:
        999px;

    background:
        var(--ucc-white);

    color:
        var(--ucc-navy);

    font-size:
        0.75rem;

    font-weight:
        800;

    white-space:
        nowrap;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.ucc-tab:hover
{
    transform:
        translateY(-1px);

    border-color:
        rgba(21, 154, 156, 0.5);

    background:
        rgba(21, 154, 156, 0.055);

    color:
        var(--ucc-teal-dark);
}


.ucc-tab.is-active
{
    border-color:
        var(--ucc-teal);

    background:
        linear-gradient(
            135deg,
            rgba(21, 154, 156, 0.14),
            rgba(31, 111, 139, 0.08)
        );

    color:
        var(--ucc-teal-dark);

    box-shadow:
        0 5px 16px rgba(21, 154, 156, 0.12);
}


/* =========================================================
   TABLE STACK
   ========================================================= */

.ucc-table-stack
{
    display:
        grid;

    gap:
        1.5rem;
}


/* =========================================================
   CATEGORY SECTIONS
   ========================================================= */

.ucc-category-section
{
    scroll-margin-top:
        6rem;

    padding:
        1.35rem;

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

    border-radius:
        1.1rem;

    background:
        var(--ucc-white);

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


.ucc-category-section[hidden]
{
    display:
        none !important;
}


.ucc-category-heading
{
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        1rem;
}


.ucc-category-eyebrow
{
    margin:
        0 0 0.3rem;

    color:
        var(--ucc-teal-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.ucc-category-heading h2
{
    margin:
        0;

    color:
        var(--ucc-navy);

    font-size:
        clamp(1.25rem, 2.5vw, 1.55rem);

    font-weight:
        800;
}


.ucc-category-count
{
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0.4rem 0.7rem;

    border-radius:
        999px;

    background:
        rgba(31, 111, 139, 0.08);

    color:
        var(--ucc-blue);

    font-size:
        0.7rem;

    font-weight:
        800;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.ucc-table-wrap
{
    width:
        100%;

    overflow-x:
        auto;

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

    border-radius:
        0.9rem;

    background:
        var(--ucc-white);

    scrollbar-width:
        thin;
}


/* =========================================================
   TABLE
   ========================================================= */

.ucc-table
{
    width:
        100%;

    min-width:
        760px;

    margin:
        0;

    border-collapse:
        collapse;

    font-variant-numeric:
        tabular-nums;
}


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

    border-bottom:
        1px solid #e8eef4;

    text-align:
        left;

    vertical-align:
        middle;
}


.ucc-table th
{
    position:
        sticky;

    top:
        0;

    z-index:
        2;

    background:
        var(--ucc-navy-dark);

    color:
        var(--ucc-white);

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.02em;
}


.ucc-table td
{
    color:
        var(--ucc-text);

    font-size:
        0.84rem;

    font-weight:
        650;

    line-height:
        1.5;
}


.ucc-table tbody tr:nth-child(even)
{
    background:
        var(--ucc-lighter);
}


.ucc-table tbody tr:hover
{
    background:
        rgba(21, 154, 156, 0.055);
}


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


.ucc-table tr[hidden]
{
    display:
        none !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.ucc-badge
{
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        28px;

    padding:
        0.3rem 0.6rem;

    border-radius:
        999px;

    font-size:
        0.66rem;

    font-weight:
        800;

    white-space:
        nowrap;
}


.ucc-badge.exact
{
    background:
        rgba(25, 135, 84, 0.1);

    color:
        var(--ucc-green-dark);
}


.ucc-badge.approx
{
    background:
        rgba(217, 119, 6, 0.1);

    color:
        #9a5a07;
}


/* =========================================================
   NOTES
   ========================================================= */

.ucc-note
{
    margin-bottom:
        1rem;

    padding:
        1rem;

    border-left:
        4px solid var(--ucc-blue);

    border-radius:
        0.8rem;

    background:
        rgba(31, 111, 139, 0.055);
}


.ucc-note strong
{
    display:
        block;

    margin-bottom:
        0.3rem;

    color:
        var(--ucc-navy);

    font-size:
        0.85rem;
}


.ucc-note p
{
    margin:
        0;

    color:
        var(--ucc-text);

    font-size:
        0.82rem;

    line-height:
        1.6;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

.ucc-no-results
{
    padding:
        3rem 1.5rem;

    border:
        1px dashed var(--ucc-border);

    border-radius:
        1rem;

    background:
        var(--ucc-white);

    text-align:
        center;
}


.ucc-no-results[hidden]
{
    display:
        none !important;
}


.ucc-no-results-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    margin:
        0 auto 1rem;

    border-radius:
        50%;

    background:
        rgba(21, 154, 156, 0.08);

    color:
        var(--ucc-teal-dark);

    font-size:
        1.2rem;
}


.ucc-no-results h2
{
    margin-bottom:
        0.5rem;

    color:
        var(--ucc-navy);

    font-size:
        1.25rem;

    font-weight:
        800;
}


.ucc-no-results p
{
    margin:
        0;

    color:
        var(--ucc-muted);

    font-size:
        0.88rem;
}


/* =========================================================
   FUTURE EXPANSION
   ========================================================= */

.ucc-expansion-section
{
    padding:
        4rem 0;

    background:
        var(--ucc-white);
}


.ucc-expansion-card
{
    display:
        grid;

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

    gap:
        2rem;

    align-items:
        center;

    padding:
        2rem;

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

    border-radius:
        1.15rem;

    background:
        linear-gradient(
            135deg,
            rgba(21, 154, 156, 0.06),
            rgba(31, 111, 139, 0.04)
        );

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


.ucc-expansion-card h2
{
    margin:
        0 0 0.65rem;

    color:
        var(--ucc-navy);

    font-size:
        clamp(1.4rem, 3vw, 1.8rem);

    font-weight:
        800;
}


.ucc-expansion-card p:last-child
{
    margin:
        0;

    color:
        var(--ucc-muted);

    line-height:
        1.7;
}


.ucc-expansion-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        76px;

    height:
        76px;

    border-radius:
        1rem;

    background:
        var(--ucc-navy-dark);

    color:
        var(--ucc-white);

    font-size:
        1.8rem;

    box-shadow:
        0 10px 24px rgba(8, 28, 47, 0.18);
}


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

.ucc-related-section
{
    padding:
        4rem 0;

    background:
        var(--ucc-light);
}


.ucc-related-section h2
{
    margin:
        0 0 1.4rem;

    color:
        var(--ucc-navy);

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

    font-weight:
        800;
}


.ucc-related-grid
{
    display:
        grid;

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

    gap:
        1rem;
}


.ucc-related-card
{
    display:
        grid;

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

    gap:
        1rem;

    align-items:
        center;

    min-height:
        132px;

    padding:
        1.25rem;

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

    border-radius:
        1rem;

    background:
        var(--ucc-white);

    color:
        inherit;

    text-decoration:
        none;

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

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.ucc-related-card:hover
{
    transform:
        translateY(-2px);

    border-color:
        rgba(21, 154, 156, 0.55);

    color:
        inherit;

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


.ucc-related-icon
{
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    border-radius:
        0.85rem;

    background:
        rgba(21, 154, 156, 0.09);

    color:
        var(--ucc-teal-dark);
}


.ucc-related-card h3
{
    margin:
        0 0 0.3rem;

    color:
        var(--ucc-navy);

    font-size:
        1rem;

    font-weight:
        800;
}


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

    color:
        var(--ucc-muted);

    font-size:
        0.82rem;

    line-height:
        1.55;
}


/* =========================================================
   SEARCH HIGHLIGHT
   ========================================================= */

.ucc-search-highlight
{
    border-radius:
        0.2rem;

    background:
        rgba(255, 214, 10, 0.28);

    color:
        inherit;

    padding:
        0 0.08em;
}


/* =========================================================
   TABLE SEARCH MATCH
   ========================================================= */

.ucc-table tbody tr.is-search-match
{
    background:
        rgba(21, 154, 156, 0.08);
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991.98px)
{
    .ucc-intro-grid
    {
        grid-template-columns:
            1fr;
    }


    .ucc-download-card
    {
        max-width:
            620px;
    }


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


    .ucc-tabs
    {
        top:
            0;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 767.98px)
{
    .ucc-intro-section
    {
        padding:
            3rem 0 1.5rem;
    }


    .ucc-chart-section
    {
        padding:
            2rem 0 3.5rem;
    }


    .ucc-search-card,
    .ucc-category-section
    {
        padding:
            1rem;
    }


    .ucc-category-heading
    {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .ucc-table
    {
        min-width:
            680px;
    }


    .ucc-expansion-card
    {
        grid-template-columns:
            1fr;
    }


    .ucc-expansion-icon
    {
        width:
            62px;

        height:
            62px;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px)
{
    .ucc-intro-section .container,
    .ucc-chart-section .container,
    .ucc-expansion-section .container,
    .ucc-related-section .container
    {
        padding-left:
            1rem !important;

        padding-right:
            1rem !important;
    }


    .ucc-search-box
    {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }


    .ucc-tabs
    {
        margin-left:
            -0.15rem;

        margin-right:
            -0.15rem;

        padding:
            0.75rem;
    }


    .ucc-tab
    {
        font-size:
            0.7rem;
    }


    .ucc-category-section
    {
        border-radius:
            0.9rem;
    }


    .ucc-table-wrap
    {
        border-radius:
            0.75rem;
    }


    .ucc-table
    {
        min-width:
            620px;
    }


    .ucc-table th,
    .ucc-table td
    {
        padding:
            0.8rem;

        font-size:
            0.78rem;
    }


    .ucc-download-card
    {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .ucc-expansion-card
    {
        padding:
            1.4rem;
    }


    .ucc-related-card
    {
        grid-template-columns:
            1fr;

        align-items:
            flex-start;
    }
}


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

@media (prefers-reduced-motion: reduce)
{
    .ucc-download-button,
    .ucc-search-box,
    .ucc-tab,
    .ucc-related-card
    {
        transition:
            none;
    }
}