/* ============================================================
   THE REF PAGE
   Homepage Styles
   ============================================================ */


/* ============================================================
   1. HERO / SEARCH CONSOLE
   ============================================================ */

.hero-console {
    display: grid;

    grid-template-columns:
        clamp(220px, 18vw, 250px) minmax(0, 1fr) clamp(220px, 18vw, 250px);

    width: 100%;

    border:
        var(--border-width-heavy) solid var(--color-border);

    background:
        var(--color-bg);
}


/* ------------------------------------------------------------
   Intro
   ------------------------------------------------------------ */

.hero-intro {
    min-width: 0;

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

    border-right:
        var(--border-width) solid var(--color-border);

    container-type:
        inline-size;
}


.hero-intro h1 {
    margin-bottom:
        var(--space-5);

    font-size:
        clamp(2.4rem,
            16cqw,
            4rem);

    line-height:
        0.98;
}


.hero-intro h1 span {
    display:
        block;

    max-width:
        100%;

    white-space:
        nowrap;
}


.hero-intro-text {
    max-width:
        18rem;

    margin:
        0;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-sm);

    font-weight:
        600;

    line-height:
        1.5;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------------
   Search
   ------------------------------------------------------------ */

.hero-search {
    min-width:
        0;

    padding:
        clamp(1.25rem,
            2vw,
            2rem);
}


.hero-search-header {
    margin-bottom:
        var(--space-3);
}


.hero-search-form {
    width:
        100%;
}


.hero-search-bar {
    gap:
        0;
}


.hero-search-bar input {
    min-width:
        0;

    min-height:
        56px;

    border-right:
        0;

    font-size:
        var(--text-base);
}


.hero-search-button {
    min-width:
        130px;

    min-height:
        56px;
}


.hero-search-hint {
    margin:
        var(--space-2) 0 var(--space-4);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    letter-spacing:
        0.035em;
}


/* ------------------------------------------------------------
   Browse shortcuts
   ------------------------------------------------------------ */

.hero-filter-group {
    display:
        grid;

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

    gap:
        1px;

    width:
        100%;

    margin-top:
        var(--space-4);

    padding:
        1px;

    background:
        var(--color-border);
}


.hero-filter-group .tag {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-width:
        0;

    min-height:
        38px;

    padding:
        0.45rem 0.65rem;

    border:
        0;

    background:
        var(--color-bg);

    color:
        var(--color-text);

    font-family:
        var(--font-ui);

    font-weight:
        750;

    font-stretch:
        var(--font-stretch-ui);

    font-optical-sizing:
        auto;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}


.hero-filter-group .tag:hover,
.hero-filter-group .tag:focus-visible {
    background:
        var(--color-text);

    color:
        var(--color-bg);
}


/* ------------------------------------------------------------
   Popular tags
   ------------------------------------------------------------ */

.hero-popular-tags {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-3);

    margin-top:
        var(--space-4);
}


.hero-tags-label {
    flex:
        0 0 auto;

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.hero-popular-tags .cluster {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);
}


.hero-popular-tags .tag {
    text-decoration:
        none;
}


/* ------------------------------------------------------------
   System panel
   ------------------------------------------------------------ */

.hero-aside {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-width:
        0;

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

    border-left:
        var(--border-width) solid var(--color-border);
}


.hero-aside-message {
    font-family:
        var(--font-display);

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

    font-weight:
        850;

    font-stretch:
        var(--font-stretch-display);

    line-height:
        1.05;

    letter-spacing:
        var(--font-spacing-display);

    text-transform:
        uppercase;
}


.hero-aside-rule {
    display:
        block;

    width:
        2rem;

    height:
        var(--border-width);

    margin-block:
        var(--space-6);

    background:
        var(--color-border);
}


.hero-aside-meta {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0.2rem;

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        600;

    line-height:
        1.45;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------------
   Hero responsive
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

    .hero-console {
        grid-template-columns:
            minmax(260px,
                0.8fr) minmax(0,
                2fr);
    }


    .hero-aside {
        grid-column:
            1 / -1;

        flex-direction:
            row;

        align-items:
            center;

        gap:
            var(--space-5);

        border-top:
            var(--border-width) solid var(--color-border);

        border-left:
            0;
    }


    .hero-aside-message br {
        display:
            none;
    }


    .hero-aside-rule {
        width:
            var(--border-width);

        height:
            2.5rem;

        margin:
            0;
    }


    .hero-aside-meta {
        margin-left:
            auto;
    }

}


@media (max-width: 760px) {

    .hero-console {
        grid-template-columns:
            1fr;
    }


    .hero-intro {
        border-right:
            0;

        border-bottom:
            var(--border-width) solid var(--color-border);
    }


    .hero-intro h1 {
        margin-bottom:
            var(--space-3);

        font-size:
            clamp(3rem,
                15vw,
                5rem);
    }


    .hero-search {
        border-bottom:
            var(--border-width) solid var(--color-border);
    }


    .hero-filter-group {
        grid-template-columns:
            repeat(3,
                minmax(0, 1fr));
    }


    .hero-aside {
        border-top:
            0;
    }

}


@media (max-width: 520px) {

    .hero-search-bar {
        grid-template-columns:
            1fr;
    }


    .hero-search-bar input {
        border-right:
            var(--border-width) solid var(--color-border);

        border-bottom:
            0;
    }


    .hero-search-button {
        width:
            100%;
    }


    .hero-filter-group {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .hero-popular-tags {
        align-items:
            flex-start;
    }


    .hero-tags-label {
        width:
            100%;
    }


    .hero-aside {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .hero-aside-rule {
        width:
            2rem;

        height:
            var(--border-width);

        margin-block:
            var(--space-2);
    }


    .hero-aside-meta {
        margin-left:
            0;
    }


    .hero-aside-message br {
        display:
            none;
    }

}


/* ============================================================
   2. HOME MODULE FRAMES
   ============================================================ */

.popular-panel,
.reference-index,
.utility-panel {
    width: 100%;
    min-width: 0;

    border: var(--border-width-heavy) solid var(--color-border);

    background: var(--color-bg);
}


/* ============================================================
   3. POPULAR REFERENCES
   ============================================================ */

.popular-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

    background: var(--color-border);
}


/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */

.popular-card {
    display: grid;

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

    min-width: 0;
    min-height: 150px;

    background: var(--color-surface);

    transition:
        background var(--transition-fast);
}

.popular-card:hover {
    background: var(--color-surface-2);
}

.popular-rank {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 0.9rem;

    border-right: 1px solid var(--color-border-soft);

    color: var(--color-text);

    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 850;
    font-stretch: var(--font-stretch-display);

    line-height: 1;

    letter-spacing: 0.02em;
}

.popular-card-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 0.85rem;
}

.popular-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-2);

    margin-bottom: var(--space-3);
}

.popular-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    color: var(--color-text);

    font-size: 1rem;
}

.popular-card-icon i {
    pointer-events: none;
}


/* ------------------------------------------------------------
   Compact category badges
   ------------------------------------------------------------ */

.popular-card .category-badge {
    width: auto;
    min-width: 62px;
    min-height: 22px;

    padding:
        0.2rem 0.45rem;

    font-size: 0.62rem;
}


/* ------------------------------------------------------------
   Content
   ------------------------------------------------------------ */

.popular-card h3 {
    margin:
        0 0 var(--space-2);

    font-size: clamp(1.05rem, 1.4vw, 1.3rem);

    line-height: 1.05;
}

.popular-card-title {
    color: var(--color-text);

    text-decoration: none;
}

.popular-card-title:hover,
.popular-card-title:focus-visible {
    color: var(--color-accent);
}

.popular-card-description {
    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.45;
}

.popular-card-open {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    gap: 0.45rem;

    margin-top: auto;
    padding-top: var(--space-3);

    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    text-decoration: none;
}

.popular-card-open:hover,
.popular-card-open:focus-visible {
    color: var(--color-accent-hover);
}

.popular-card-open i {
    pointer-events: none;

    font-size: 0.75rem;

    transition:
        transform var(--transition-fast);
}

.popular-card-open:hover i,
.popular-card-open:focus-visible i {
    transform: translateX(3px);
}


/* ------------------------------------------------------------
   Popular responsive
   ------------------------------------------------------------ */

@media (max-width: 1150px) {

    .popular-card {
        min-height: 145px;
    }

    .popular-rank {
        font-size: 1.65rem;
    }

    .popular-card-content {
        padding: 0.75rem;
    }

    .popular-card h3 {
        font-size: 1.05rem;
    }

    .popular-card-description {
        font-size: 0.7rem;
    }
}


@media (max-width: 900px) {

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

    .popular-card {
        min-height: 140px;
    }

    .popular-card h3 {
        font-size: 1.1rem;
    }

    .popular-card-description {
        font-size: var(--text-xs);
    }
}


@media (max-width: 540px) {

    .popular-grid {
        grid-template-columns: 1fr;
    }

    .popular-card {
        grid-template-columns:
            50px minmax(0, 1fr);

        min-height: 125px;
    }

    .popular-rank {
        font-size: 1.5rem;
    }

    .popular-card-content {
        padding: 0.75rem;
    }

    .popular-card h3 {
        font-size: 1.05rem;
    }

    .popular-card-description {
        font-size: 0.7rem;
    }
}


/* ============================================================
   4. TOOLS + A–Z INDEX
   ============================================================ */

.utility-grid {
    display: grid;

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

    gap: var(--section-gap);

    width: 100%;
}

.tools-panel .module-header-icon {
    background: var(--color-green);
    color: #111;
}

.az-panel .module-header-icon {
    background: var(--color-yellow);
    color: var(--color-accent-text);
}


/* ============================================================
   HOME MINI TOOLS
   ============================================================ */

/* ------------------------------------------------------------
   Grid
   ------------------------------------------------------------ */

.home-tools-grid {
    display: grid;

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

    gap: 1px;

    width: 100%;

    background: var(--color-border);
}


/* ------------------------------------------------------------
   Tool card
   ------------------------------------------------------------ */

.home-tool-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: clamp(1rem, 1.4vw, 1.3rem);

    background: var(--color-surface);
}


/* ------------------------------------------------------------
   Tool card header
   ------------------------------------------------------------ */

.home-tool-card-header {
    display: flex;
    align-items: flex-start;

    gap: var(--space-3);
}

.home-tool-card-heading {
    min-width: 0;
}

.home-tool-card-heading .eyebrow {
    display: block;

    margin-bottom: var(--space-1);
}

.home-tool-card-heading h3 {
    margin: 0;

    font-size: clamp(1.2rem, 1.55vw, 1.5rem);

    line-height: 1;
}

.home-tool-card-heading h3 a {
    color: var(--color-text);

    text-decoration: none;
}

.home-tool-card-heading h3 a:hover,
.home-tool-card-heading h3 a:focus-visible {
    color: var(--color-accent);
}


/* ------------------------------------------------------------
   Tool icon
   ------------------------------------------------------------ */

.home-tool-card-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-bg);
    color: var(--color-text);

    font-size: 1.1rem;
}

.home-tool-card-icon i {
    pointer-events: none;
}


/* ------------------------------------------------------------
   Description
   ------------------------------------------------------------ */

.home-tool-card-description {
    margin:
        var(--space-3) 0 var(--space-4);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.45;
}


/* ============================================================
   MINI TOOL SHELL
   ============================================================ */

.home-mini-tool {
    --mini-lcd-bg: #b5c0a9;
    --mini-lcd-text: #182018;
    --mini-lcd-muted: #455044;
    --mini-bar-bg: #1c201e;
    --mini-bar-text: #f2f0e8;

    display: flex;
    flex-direction: column;

    width: 100%;

    margin-top: auto;

    border: var(--border-width) solid var(--color-border);

    background: var(--color-bg);

    box-shadow:
        4px 4px 0 var(--color-border);
}


/* ------------------------------------------------------------
   Dark theme LCD
   ------------------------------------------------------------ */

:root[data-theme="dark"] .home-mini-tool {
    --mini-lcd-bg: #7d8975;
    --mini-lcd-text: #101510;
    --mini-lcd-muted: #273027;
}

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) .home-mini-tool {
        --mini-lcd-bg: #7d8975;
        --mini-lcd-text: #101510;
        --mini-lcd-muted: #273027;
    }
}


/* ------------------------------------------------------------
   Mini toolbar
   ------------------------------------------------------------ */

.home-mini-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    min-height: 34px;

    padding:
        0 var(--space-3);

    border-bottom: 1px solid var(--color-border);

    background: var(--mini-bar-bg);
    color: var(--mini-bar-text);

    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
}

.home-mini-live {
    display: inline-flex;
    align-items: center;

    gap: 0.35rem;

    color: var(--color-accent);
}

.home-mini-live i {
    font-size: 0.4rem;
}


/* ------------------------------------------------------------
   Toolbar actions
   ------------------------------------------------------------ */

.home-mini-toolbar-actions {
    display: flex;
    align-items: center;

    gap: var(--space-2);
}

.home-mini-clear {
    padding: 0;

    border: 0;

    background: transparent;
    color: var(--mini-bar-text);

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;

    cursor: pointer;

    opacity: 0.7;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.home-mini-clear:hover,
.home-mini-clear:focus-visible {
    color: var(--color-accent);

    opacity: 1;
}

.home-mini-clear:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   Tool body
   ------------------------------------------------------------ */

.home-mini-body {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    padding: var(--space-3);
}


/* ============================================================
   MINI TOOL FIELDS
   ============================================================ */

.home-mini-field {
    min-width: 0;
}

.home-mini-field label {
    display: block;

    margin-bottom: var(--space-1);

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.055em;
    line-height: 1.2;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   Number inputs
   ------------------------------------------------------------ */

.home-mini-input {
    display: flex;

    width: 100%;
    min-height: 42px;

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

    background: var(--color-surface);
}

.home-mini-input:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.home-mini-input input {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 40px;

    padding:
        0 var(--space-2);

    border: 0;
    outline: 0;

    appearance: textfield;

    background: transparent;
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
}

.home-mini-input input[type="number"]::-webkit-inner-spin-button,
.home-mini-input input[type="number"]::-webkit-outer-spin-button {
    margin: 0;

    appearance: none;
}

.home-mini-input>span {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    min-width: 40px;

    padding-inline: var(--space-2);

    border-left: 1px solid var(--color-border);

    background: var(--color-surface-2);
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
}


/* ------------------------------------------------------------
   Select
   ------------------------------------------------------------ */

.home-mini-select {
    position: relative;

    width: 100%;

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

    background: var(--color-surface);
}

.home-mini-select:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.home-mini-select select {
    width: 100%;
    min-height: 42px;

    padding:
        0 2.4rem 0 var(--space-2);

    border: 0;
    outline: 0;

    appearance: none;

    background: transparent;
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;

    cursor: pointer;

    color-scheme: light;
}

.home-mini-select::after {
    position: absolute;

    top: 50%;
    right: 0.8rem;

    color: var(--color-text);

    font-family: "Font Awesome 7 Free";
    font-size: 0.65rem;
    font-weight: 900;

    content: "\f078";

    pointer-events: none;

    transform: translateY(-50%);
}

.home-mini-select select option {
    background: var(--color-surface);
    color: var(--color-text);
}


/* Manual dark mode */

:root[data-theme="dark"] .home-mini-select select {
    color-scheme: dark;
}

:root[data-theme="dark"] .home-mini-select select option {
    background: #1b1e1b;
    color: #e8e5dc;
}


/* Device dark mode */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme]) .home-mini-select select {
        color-scheme: dark;
    }

    :root:not([data-theme]) .home-mini-select select option {
        background: #1b1e1b;
        color: #e8e5dc;
    }
}


/* ============================================================
   UNIT CONVERTER INPUT ROW
   ============================================================ */

.home-mini-converter-input {
    display: grid;

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

    align-items: end;

    gap: var(--space-2);
}


/* ------------------------------------------------------------
   Swap button
   ------------------------------------------------------------ */

.home-mini-swap {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    padding: 0;

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

    background: var(--color-surface-2);
    color: var(--color-text);

    box-shadow:
        2px 2px 0 var(--color-border);

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.home-mini-swap:hover,
.home-mini-swap:focus-visible {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.home-mini-swap:active {
    transform: translate(2px, 2px);

    box-shadow: none;
}


/* ============================================================
   PERCENTAGE CALCULATOR
   ============================================================ */

/* ------------------------------------------------------------
   Inputs
   ------------------------------------------------------------ */

.home-mini-percentage-inputs {
    display: grid;

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

    gap: var(--space-2);
}


/* ------------------------------------------------------------
   Quick presets
   ------------------------------------------------------------ */

.home-percentage-presets {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    margin-bottom: var(--space-4);

    padding:
        var(--space-2) var(--space-3);

    border: 1px solid var(--color-border-soft);

    background: var(--color-bg);
}

.home-percentage-presets-label {
    flex: 0 0 auto;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-percentage-preset-buttons {
    display: grid;

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

    gap: 4px;

    width: min(240px, 100%);
}

.home-percentage-preset-buttons button {
    min-height: 30px;

    padding:
        0.25rem 0.45rem;

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

    background: var(--color-surface);
    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.home-percentage-preset-buttons button:hover,
.home-percentage-preset-buttons button:focus-visible {
    background: var(--color-accent);
    color: var(--color-accent-text);
}


/* ============================================================
   LCD DISPLAY
   ============================================================ */

.home-mini-lcd {
    position: relative;

    overflow: hidden;

    min-height: 108px;

    padding:
        var(--space-3) var(--space-3);

    border: var(--border-width) solid var(--color-border);

    background: var(--mini-lcd-bg);
    color: var(--mini-lcd-text);

    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}


/* ------------------------------------------------------------
   LCD dot texture
   ------------------------------------------------------------ */

.home-mini-lcd::before {
    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(circle,
            rgba(24, 32, 24, 0.13) 0.7px,
            transparent 0.8px);

    background-size: 6px 6px;

    content: "";

    pointer-events: none;
}

.home-mini-lcd>* {
    position: relative;

    z-index: 1;
}


/* ------------------------------------------------------------
   LCD header
   ------------------------------------------------------------ */

.home-mini-lcd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    color: var(--mini-lcd-muted);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   LCD main value
   ------------------------------------------------------------ */

.home-mini-lcd-value {
    display: block;

    margin-top: 0.45rem;

    overflow-wrap: anywhere;

    color: var(--mini-lcd-text);

    font-family: var(--font-mono);
    font-size: clamp(1.65rem, 2.4vw, 2.4rem);
    font-weight: 800;

    letter-spacing: -0.055em;
    line-height: 1;
}


/* ------------------------------------------------------------
   LCD divider
   ------------------------------------------------------------ */

.home-mini-lcd-rule {
    width: 100%;
    height: 1px;

    margin:
        var(--space-2) 0;

    background: var(--mini-lcd-muted);

    opacity: 0.45;
}


/* ------------------------------------------------------------
   LCD equation
   ------------------------------------------------------------ */

.home-mini-lcd-meta {
    display: block;

    color: var(--mini-lcd-muted);

    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;

    line-height: 1.3;
}


/* ============================================================
   TOOL CARD FOOTER
   ============================================================ */

.home-tool-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    margin-top: var(--space-4);
}

.home-tool-card-mode {
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   Open full tool
   ------------------------------------------------------------ */

.home-tool-open {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;
}

.home-tool-open i {
    font-size: 0.7rem;

    transition:
        transform var(--transition-fast);
}

.home-tool-open:hover,
.home-tool-open:focus-visible {
    color: var(--color-accent);

    text-decoration: none;
}

.home-tool-open:hover i,
.home-tool-open:focus-visible i {
    transform: translateX(3px);
}


/* ============================================================
   TOOLS PANEL FOOTER
   ============================================================ */

.tools-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    padding:
        var(--space-3) var(--space-4);

    border-top: var(--border-width) solid var(--color-border);

    background: var(--color-surface-2);
}

.tools-panel-footer>div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--space-2) var(--space-3);
}

.tools-panel-footer .eyebrow {
    margin: 0;
}

.tools-panel-footer-copy {
    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.tools-panel-link {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: var(--space-2);

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;

    text-decoration: none;
    text-transform: uppercase;
}

.tools-panel-link i {
    font-size: 0.7rem;

    transition:
        transform var(--transition-fast);
}

.tools-panel-link:hover,
.tools-panel-link:focus-visible {
    color: var(--color-accent);

    text-decoration: none;
}

.tools-panel-link:hover i,
.tools-panel-link:focus-visible i {
    transform: translateX(3px);
}


/* ============================================================
   4.1 A–Z INDEX
   ============================================================ */

.az-body {
    padding: var(--space-4);
}

.az-grid {
    display: grid;

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

    gap: var(--space-2);

    width: 100%;
}


/* ------------------------------------------------------------
   A–Z keys
   ------------------------------------------------------------ */

.az-key {
    position: relative;

    display: grid;
    place-items: center;

    min-width: 0;
    min-height: 38px;

    padding: 0.35rem;

    border:
        1px solid var(--color-border-soft);

    background: var(--color-surface-2);
    color: var(--color-text-muted);

    box-shadow:
        2px 2px 0 var(--color-border-soft);

    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;

    line-height: 1;

    text-align: center;
    text-decoration: none;

    cursor: default;

    user-select: none;
}


/* ------------------------------------------------------------
   Inactive keys
   ------------------------------------------------------------ */

.az-key.is-disabled,
.az-key[aria-disabled="true"] {
    opacity: 0.45;

    cursor: default;

    pointer-events: none;
}


/* ------------------------------------------------------------
   Active keys
   ------------------------------------------------------------ */

.az-key.is-active {
    border-color: var(--color-border);

    background: var(--color-surface);
    color: var(--color-text);

    box-shadow:
        2px 2px 0 var(--color-border);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.az-key.is-active:hover,
.az-key.is-active:focus-visible {
    background: var(--color-accent);
    color: var(--color-accent-text);

    text-decoration: none;
}

.az-key.is-active:active {
    transform: translate(2px, 2px);

    box-shadow: none;
}


/* ------------------------------------------------------------
   A–Z footer
   ------------------------------------------------------------ */

.az-footer {
    display: grid;

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

    align-items: start;

    gap: var(--space-4);

    margin-top: var(--space-5);
    padding-top: var(--space-4);

    border-top:
        1px solid var(--color-border-soft);
}

.az-footer>div:first-child {
    min-width: 0;
}

.az-footer .eyebrow {
    margin-bottom: var(--space-1);
}

.az-footer-copy {
    max-width: 190px;

    margin: 0;

    color: var(--color-text-muted);

    font-family: var(--font-mono);
    font-size: var(--text-xs);

    line-height: 1.45;
}


/* ------------------------------------------------------------
   A–Z footer actions
   ------------------------------------------------------------ */

.az-footer-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    gap: var(--space-3);

    min-width: 0;
}

.az-stats {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: 0.65rem;

    line-height: 1.35;

    text-align: right;
    text-transform: uppercase;

    white-space: nowrap;
}

.az-stats strong {
    color: var(--color-accent);
}


/* ------------------------------------------------------------
   Full index link
   ------------------------------------------------------------ */

.az-full-index-link {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    color: var(--color-text);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;

    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

    white-space: nowrap;
}

.az-full-index-link i {
    font-size: 0.7rem;

    transition:
        transform var(--transition-fast);
}

.az-full-index-link:hover,
.az-full-index-link:focus-visible {
    color: var(--color-accent);

    text-decoration: none;
}

.az-full-index-link:hover i,
.az-full-index-link:focus-visible i {
    transform: translateX(3px);
}


/* ============================================================
   TOOLS + A–Z RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .utility-grid {
        grid-template-columns: 1fr;
    }

    .az-grid {
        grid-template-columns:
            repeat(9, minmax(0, 1fr));
    }
}


@media (max-width: 820px) {

    .home-tools-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 760px) {

    .az-grid {
        grid-template-columns:
            repeat(7, minmax(0, 1fr));
    }
}


@media (max-width: 520px) {

    /* ------------------------------------------------------------
       Mini tools
       ------------------------------------------------------------ */

    .home-tool-card {
        padding: var(--space-4);
    }

    .home-tool-card-heading h3 {
        font-size: 1.2rem;
    }

    .home-mini-percentage-inputs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-percentage-presets {
        align-items: stretch;
        flex-direction: column;
    }

    .home-percentage-preset-buttons {
        width: 100%;
    }

    .home-mini-lcd {
        min-height: 104px;
    }

    .home-mini-lcd-value {
        font-size: 2rem;
    }

    .home-tool-card-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-2);
    }

    .tools-panel-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: var(--space-3);
    }


    /* ------------------------------------------------------------
       A–Z
       ------------------------------------------------------------ */

    .az-body {
        padding: var(--space-3);
    }

    .az-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .az-key {
        min-height: 36px;

        font-size: var(--text-xs);
    }


    /* ------------------------------------------------------------
       A–Z footer
       ------------------------------------------------------------ */

    .az-footer {
        grid-template-columns: 1fr;

        gap: var(--space-3);
    }

    .az-footer-copy {
        max-width: none;
    }

    .az-footer-actions {
        align-items: flex-start;

        gap: var(--space-2);
    }

    .az-stats {
        text-align: left;
    }
}


@media (max-width: 380px) {

    .home-mini-percentage-inputs {
        grid-template-columns: 1fr;
    }
}




/* ============================================================
   5. REFERENCE INDEX
   ============================================================ */

.reference-columns {
    display: grid;

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

    grid-template-rows:
        repeat(4, minmax(72px, auto));

    width: 100%;
}


/* ------------------------------------------------------------
   Directory columns
   ------------------------------------------------------------ */

.reference-table {
    display: grid;

    grid-template-rows:
        subgrid;

    grid-row:
        1 / span 4;

    min-width: 0;
}

.reference-table:first-child {
    grid-column: 1;

    border-right:
        var(--border-width) solid var(--color-border);
}

.reference-table:last-child {
    grid-column: 2;
}


/* ------------------------------------------------------------
   Reference row
   ------------------------------------------------------------ */

.reference-row {
    display: grid;

    grid-template-columns:
        82px 48px minmax(140px, 1.05fr) 78px minmax(170px, 1.5fr) 86px;

    align-items: stretch;

    min-height: 72px;

    border-bottom:
        1px solid var(--color-border-soft);

    background:
        var(--color-surface);

    transition:
        background var(--transition-fast);
}

.reference-row:last-child {
    border-bottom: 0;
}

.reference-row:hover {
    background:
        var(--color-surface-2);
}

.reference-id,
.reference-item-icon,
.reference-title,
.reference-description,
.reference-open {
    display: flex;
    align-items: center;

    min-width: 0;

    padding:
        0.7rem 0.75rem;
}


/* ------------------------------------------------------------
   Reference cells
   ------------------------------------------------------------ */

.reference-id {
    justify-content: center;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        600;

    white-space:
        nowrap;
}


.reference-item-icon {
    justify-content: center;

    padding-inline:
        0.4rem;

    border-left:
        1px solid var(--color-border-soft);

    border-right:
        1px solid var(--color-border-soft);

    color:
        var(--color-text);

    font-size:
        1.25rem;
}

.reference-item-icon i {
    pointer-events:
        none;
}


.reference-title {
    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        var(--text-lg);

    font-weight:
        850;

    font-stretch:
        72%;

    line-height:
        1.05;

    letter-spacing:
        0.015em;

    text-decoration:
        none;
}

.reference-title:hover,
.reference-title:focus-visible {
    color:
        var(--color-accent);
}


.reference-description {
    margin:
        0;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    line-height:
        1.45;
}


.reference-open {
    justify-content:
        center;

    gap:
        0.45rem;

    min-width:
        78px;

    border-left:
        1px solid var(--color-border-soft);

    color:
        var(--color-accent);

    font-family:
        var(--font-display);

    font-weight:
        800;

    font-stretch:
        var(--font-stretch-ui);

    line-height:
        1;

    text-decoration:
        none;

    white-space:
        nowrap;
}

.reference-open:hover,
.reference-open:focus-visible {
    background:
        var(--color-accent);

    color:
        var(--color-accent-text);
}

.reference-open i {
    pointer-events:
        none;

    font-size:
        0.8rem;
}


/* ------------------------------------------------------------
   Category badge
   ------------------------------------------------------------ */

.reference-row .category-badge {
    align-self:
        center;

    justify-self:
        center;

    width:
        68px;

    margin:
        0;

    text-align:
        center;
}


/* ------------------------------------------------------------
   Reference responsive
   ------------------------------------------------------------ */

@media (max-width: 1250px) {

    .reference-row {
        grid-template-columns:
            78px 44px minmax(115px, 1fr) 74px minmax(135px, 1.25fr) 78px;
    }

    .reference-row .category-badge {
        width:
            64px;
    }

    .reference-description {
        font-size:
            0.7rem;
    }

    .reference-id,
    .reference-item-icon,
    .reference-title,
    .reference-description,
    .reference-open {
        padding-inline:
            0.6rem;
    }

}


@media (max-width: 1180px) {

    /* ------------------------------------------------------------
       Stack the two directory columns
       ------------------------------------------------------------ */

    .reference-columns {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;
    }


    .reference-table {
        display:
            block;

        grid-column:
            1;

        grid-row:
            auto;
    }


    .reference-table:first-child {
        grid-column:
            1;

        border-right:
            0;

        border-bottom:
            var(--border-width) solid var(--color-border);
    }


    .reference-table:last-child {
        grid-column:
            1;
    }


    .reference-row {
        grid-template-columns:
            82px 48px minmax(150px, 1.05fr) 78px minmax(180px, 1.5fr) 86px;
    }


    .reference-row .category-badge {
        width:
            68px;
    }

}


@media (max-width: 820px) {

    .reference-row {
        grid-template-columns:
            78px 46px minmax(0, 1fr) 74px 76px;

        min-height:
            66px;
    }


    .reference-description {
        display:
            none;
    }


    .reference-item-icon {
        font-size:
            1.15rem;
    }


    .reference-title {
        font-size:
            var(--text-base);
    }


    .reference-row .category-badge {
        width:
            64px;

        margin:
            0;
    }


    .reference-open {
        min-width:
            0;
    }

}


@media (max-width: 620px) {

    .reference-row {
        grid-template-columns:
            76px 44px minmax(0, 1fr) 64px;
    }


    .reference-row .category-badge {
        display:
            none;
    }


    .reference-open {
        min-width:
            0;

        padding-inline:
            0.5rem;
    }

}


@media (max-width: 480px) {

    .reference-row {
        grid-template-columns:
            42px minmax(0, 1fr) 52px;

        min-height:
            58px;
    }


    .reference-id {
        display:
            none;
    }


    .reference-item-icon {
        border-left:
            0;

        padding-inline:
            0.45rem;
    }


    .reference-title {
        padding-inline:
            0.65rem;
    }


    .reference-open {
        min-width:
            0;

        padding-inline:
            0.5rem;
    }


    .reference-open-text {
        display:
            none;
    }

}



/* ============================================================
   6. ABOUT / PURPOSE
   ============================================================ */

.about-panel-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr) minmax(260px, 0.8fr);

    padding: 0;
}

.about-panel-content {
    min-width: 0;

    padding: clamp(1.25rem, 2vw, 2rem);
}

.about-panel-content h2 {
    max-width: 900px;

    margin-bottom: var(--space-4);
}

.about-lead {
    max-width: 850px;

    font-size: var(--text-lg);
    font-weight: 550;

    line-height: 1.5;
}

.about-panel-content .text-muted {
    max-width: 850px;
}

.about-actions {
    margin-top: var(--space-5);
}

.about-panel-index {
    min-width: 0;

    padding: clamp(1.25rem, 2vw, 2rem);

    border-left: var(--border-width) solid var(--color-border);
}

.about-topic-list {
    align-items: flex-start;

    margin-top: var(--space-4);
}

.about-panel-note {
    margin:
        var(--space-5) 0 0;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   About responsive
   ------------------------------------------------------------ */

@media (max-width: 760px) {

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

    .about-panel-index {
        border-top: var(--border-width) solid var(--color-border);
        border-left: 0;
    }
}


@media (max-width: 520px) {

    .about-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-actions .button {
        width: 100%;
    }
}