/* UI04 - Sitewide native control fallback.
   :where() keeps specificity at zero so every component or Workbench remains
   free to override this foundation with its existing selectors. */

:root {
    --na-control-height: 44px;
    --na-control-radius: 13px;
    --na-control-border: color-mix(in srgb, var(--na-white) 16%, transparent);
    --na-control-border-hover: color-mix(in srgb, var(--na-accent) 48%, transparent);
    --na-control-bg: color-mix(in srgb, var(--na-surface-2) 82%, transparent);
    --na-control-bg-hover: color-mix(in srgb, var(--na-surface-2) 94%, var(--na-primary) 6%);
    --na-control-text: var(--na-white);
    --na-control-placeholder: color-mix(in srgb, var(--na-muted) 82%, transparent);
    --na-control-focus: color-mix(in srgb, var(--na-accent) 58%, transparent);
}

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([data-na-unstyled]),
    select:not([data-na-unstyled]),
    textarea:not([data-na-unstyled])
) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--na-control-height);
    border: 1px solid var(--na-control-border);
    border-radius: var(--na-control-radius);
    outline: none;
    background: var(--na-control-bg);
    color: var(--na-control-text);
    padding: 10px 13px;
    font: inherit;
    line-height: 1.35;
    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

:where(select:not([data-na-unstyled])) {
    cursor: pointer;
}

:where(textarea:not([data-na-unstyled])) {
    min-height: 112px;
    resize: vertical;
}

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([data-na-unstyled]),
    select:not([data-na-unstyled]),
    textarea:not([data-na-unstyled])
):hover:not(:disabled):not([readonly]) {
    border-color: var(--na-control-border-hover);
    background: var(--na-control-bg-hover);
}

:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([data-na-unstyled]),
    select:not([data-na-unstyled]),
    textarea:not([data-na-unstyled])
):focus-visible {
    border-color: var(--na-accent);
    box-shadow: 0 0 0 3px var(--na-control-focus), 0 0 24px rgba(0, 212, 255, .10);
}

:where(input, textarea)::placeholder {
    color: var(--na-control-placeholder);
    opacity: 1;
}

:where(input[readonly]:not([type="checkbox"]):not([type="radio"]), textarea[readonly]) {
    cursor: default;
    opacity: .78;
}

:where(input:disabled, select:disabled, textarea:disabled) {
    cursor: not-allowed;
    opacity: .5;
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--na-primary);
}

:where(input[type="checkbox"], input[type="radio"]) {
    min-width: 18px;
    min-height: 18px;
}

:where(input[type="file"]:not([data-na-unstyled])) {
    max-width: 100%;
    color: var(--na-muted);
    font-size: .82rem;
}

:where(input[type="file"]:not([data-na-unstyled]))::file-selector-button {
    min-height: 40px;
    margin-right: 10px;
    border: 1px solid var(--na-control-border);
    border-radius: 11px;
    background: var(--na-control-bg);
    color: var(--na-control-text);
    padding: 0 13px;
    cursor: pointer;
    font-weight: 850;
}

:where(button:not([data-na-unstyled])) {
    min-height: var(--na-control-height);
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--na-control-border);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(255, 45, 141, .10)),
        var(--na-control-bg);
    color: var(--na-control-text);
    padding: 9px 16px;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

:where(button:not([data-na-unstyled])):hover:not(:disabled) {
    border-color: var(--na-control-border-hover);
    background:
        linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(255, 45, 141, .16)),
        var(--na-control-bg-hover);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}

:where(button:not([data-na-unstyled])):focus-visible {
    outline: none;
    border-color: var(--na-accent);
    box-shadow: 0 0 0 3px var(--na-control-focus);
}

:where(button:not([data-na-unstyled])):active:not(:disabled) {
    transform: translateY(0) scale(.98);
}

:where(button:disabled) {
    cursor: not-allowed;
    opacity: .48;
    transform: none;
}

:where(.validation-message) {
    display: block;
    margin-top: 6px;
    color: var(--na-danger);
    font-size: .76rem;
    font-weight: 800;
}

/* The logo source is 3:2. The old 138 x 52 box compressed the rendered mark
   into a small floating shape. Mobile now uses one practical header row. */
@media (max-width: 760px) {
    .na-landing {
        padding-top: 104px;
    }

    .na-landing-nav {
        min-height: 76px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 10px;
    }

    .na-landing-brand {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
    }

    .na-landing-brand img {
        width: 104px;
        height: 64px;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }

    .na-landing-links {
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 7px;
        flex-wrap: nowrap;
    }

    .na-landing-links .na-theme-trigger,
    .na-landing-links .na-login-link {
        min-height: 42px;
    }
}

@media (max-width: 600px) {
    .na-landing-links > a[href^="#"] {
        display: none;
    }

    .na-landing-links .na-theme-trigger {
        width: 44px;
        justify-content: center;
        padding: 0;
    }

    .na-landing-links .na-theme-trigger-label,
    .na-landing-links .na-theme-chevron {
        display: none;
    }

    .na-landing-links .na-login-link {
        height: 42px;
        padding: 0 15px;
        font-size: .76rem;
    }
}

@media (max-width: 390px) {
    .na-landing-brand img {
        width: 92px;
        height: 60px;
    }

    :where(button:not([data-na-unstyled])) {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(button, input, select, textarea) {
        transition: none;
    }
}