/* SPDX-License-Identifier: LicenseRef-PVIR-Proprietary */

@media screen {
    .button,
    .button.secondary,
    .icon-button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input::file-selector-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap-actions);
        min-height: var(--control-height);
        height: auto;
        padding: var(--space-1) var(--control-padding);
        border: var(--border-width) solid var(--line);
        border-radius: var(--control-radius);
        background: var(--surface);
        color: var(--ink);
        font-family: var(--font-family);
        font-size: var(--type-label);
        line-height: var(--leading-label);
        font-weight: var(--weight-label);
        cursor: pointer;
        white-space: normal;
        text-decoration: none;
        transition: background .12s ease, border-color .12s ease;
    }

    .button:not(:disabled):not([aria-disabled="true"]):hover,
    .button.secondary:not(:disabled):not([aria-disabled="true"]):hover,
    .icon-button:not(:disabled):not([aria-disabled="true"]):hover,
    input[type="button"]:not(:disabled):hover,
    input[type="submit"]:not(:disabled):hover,
    input[type="reset"]:not(:disabled):hover,
    input:not(:disabled)::file-selector-button:hover {
        background: var(--surface-2);
        border-color: var(--muted);
    }

    .button.ghost {
        background: transparent;
        border-color: transparent;
    }

    .button.ghost:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--surface-2);
        border-color: var(--line);
    }

    .button.danger {
        background: var(--surface);
        border-color: var(--bad);
        color: var(--bad);
    }

    .button.danger:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--bad-bg);
    }

    .button.primary,
    .button.active,
    .button.is-selected,
    .button[aria-selected="true"] {
        background: var(--accent);
        border-color: var(--accent-strong);
        color: var(--ink);
    }

    .button.primary:not(:disabled):not([aria-disabled="true"]):hover,
    .button.active:not(:disabled):not([aria-disabled="true"]):hover,
    .button.is-selected:not(:disabled):not([aria-disabled="true"]):hover,
    .button[aria-selected="true"]:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--accent-hover);
    }

    .button.icon,
    .icon-button {
        width: var(--control-height);
        min-width: var(--control-height);
        padding: 0;
    }

    .button:disabled,
    .icon-button:disabled,
    .button[aria-disabled="true"],
    input[type="button"]:disabled,
    input[type="submit"]:disabled,
    input[type="reset"]:disabled,
    input:disabled::file-selector-button {
        opacity: var(--disabled-opacity);
        cursor: not-allowed;
    }

    .button[aria-busy="true"],
    .icon-button[aria-busy="true"] {
        cursor: progress;
    }

    .button[aria-busy="true"]::before,
    .icon-button[aria-busy="true"]::before {
        content: '';
        width: var(--button-spinner-size);
        height: var(--button-spinner-size);
        flex: 0 0 var(--button-spinner-size);
        border: var(--border-width) solid currentColor;
        border-right-color: transparent;
        border-radius: var(--radius-pill);
        animation: button-working .8s linear infinite;
    }

    @keyframes button-working {
        to {
            transform: rotate(360deg);
        }
    }

    .button:focus-visible,
    .icon-button:focus-visible,
    .table-wrap[tabindex]:focus-visible,
    input:not([type="file"]):focus-visible,
    input[type="file"]:focus-visible::file-selector-button,
    select:focus-visible,
    textarea:focus-visible {
        outline: var(--focus-width) solid var(--accent-strong);
        outline-offset: var(--focus-offset);
    }

    input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"]),
    select,
    textarea {
        box-sizing: border-box;
        min-height: var(--control-height);
        min-width: 0;
        max-width: 100%;
        padding: var(--space-2) var(--control-padding);
        border: var(--border-width) solid var(--line);
        border-radius: var(--control-radius);
        font-family: var(--font-family);
        font-size: var(--type-body);
        line-height: var(--leading-body);
        font-weight: var(--weight-normal);
        background: var(--surface);
        color: var(--ink);
    }

    input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"]),
    select {
        height: var(--control-height);
    }

    textarea {
        min-height: calc(var(--control-height) * 3);
        height: auto;
        resize: vertical;
    }

    input[type="date"] {
        display: block;
        max-width: 100%;
        -webkit-appearance: none;
        appearance: none;
    }

    input[type="date"]::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
    }

    input[type="file"] {
        height: auto;
        border: 0;
        padding: 0;
        background: transparent;
    }

    input::file-selector-button {
        margin: 0 var(--gap-actions) 0 0;
    }

    .global-search {
        min-height: var(--control-height);
        height: auto;
        background: var(--surface);
        border: var(--border-width) solid var(--line);
        border-radius: var(--control-radius);
        padding: 0 var(--control-padding);
    }

    .global-search input {
        border: 0;
        border-radius: 0;
        padding: 0;
        height: calc(var(--control-height) - var(--border-width) * 2);
        min-height: calc(var(--control-height) - var(--border-width) * 2);
        background: transparent;
        box-shadow: none;
    }

    select:not([multiple]):is(:not([size]), [size="0"], [size="1"]),
    input[data-result-picker] {
        -webkit-appearance: none;
        appearance: none;
        padding-inline-end: calc(var(--control-padding) + var(--space-3) + var(--gap-actions));
        background-image:
            linear-gradient(45deg,
                transparent calc(50% - var(--border-strong-width) / 2),
                currentColor 0,
                currentColor calc(50% + var(--border-strong-width) / 2),
                transparent 0),
            linear-gradient(-45deg,
                transparent calc(50% - var(--border-strong-width) / 2),
                currentColor 0,
                currentColor calc(50% + var(--border-strong-width) / 2),
                transparent 0);
        background-position:
            right calc(var(--control-padding) + var(--space-3) / 2) center,
            right var(--control-padding) center;
        background-size: calc(var(--space-3) / 2) calc(var(--space-3) / 2);
        background-repeat: no-repeat;
    }

    .global-search:focus-within {
        border-color: var(--accent-strong);
        box-shadow: var(--focus-shadow);
    }

    .global-search input:focus-visible,
    input[type="file"]:focus-visible {
        outline: 0;
    }

    .button b,
    .button strong {
        font: inherit;
    }

    

    .button.line-drag {
        padding: 0;
        cursor: grab;
    }

    .button.line-drag:active {
        cursor: grabbing;
    }

    .sidebar .button.ghost:not(.active, .is-selected, [aria-selected="true"]) {
        color: var(--text-on-dark);
    }

    .sidebar .button.ghost:not(.active, .is-selected, [aria-selected="true"],
        :disabled, [aria-disabled="true"]):hover {
        background: var(--surface-dark-hover);
        color: var(--surface-pure);
    }

    .button:where(.nav-item, .account-button, .result-button, .link-button,
        .type-card, .admin-control-card, .help-start-card, .help-category, .help-article-card) {
        justify-content: flex-start;
        text-align: left;
    }

    .button:is(.type-card, .admin-control-card, .help-start-card, .help-article-card) {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: calc(var(--control-height) * 2);
    }

    .button:where(.result-button, .account-button) {
        justify-content: space-between;
    }

    .button.nav-item {
        font-size: var(--type-body);
        line-height: var(--leading-body);
        font-weight: var(--weight-normal);
    }

    .button.nav-item.active {
        font-weight: var(--weight-heading);
    }

    input:not([type="file"], .global-search input):focus,
    select:focus,
    textarea:focus {
        border-color: var(--accent-strong);
        box-shadow: var(--focus-shadow);
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
        color: var(--muted);
        background: var(--surface-2);
        cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
        .button,
        .icon-button {
            transition: none;
        }

        .button[aria-busy="true"]::before,
        .icon-button[aria-busy="true"]::before {
            animation: none;
        }
    }

    .icon-button.mobile-only {
        display: none;
    }

    @media (max-width: 1100px) {
        .icon-button.mobile-only {
            display: inline-flex;
        }
    }

    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: var(--control-height) !important;
        height: var(--control-height) !important;
        min-height: var(--control-height) !important;
        flex: 0 0 auto;
        border: var(--border-width) solid var(--line-strong);
        border-radius: var(--radius-sm);
        background: var(--surface-pure);
        display: inline-grid;
        place-content: center;
        vertical-align: middle;
        margin: 0 var(--space-2) 0 0;
        cursor: pointer;
    }

    .switch-row input[type="checkbox"] {
        place-content: center;
    }

    input[type="checkbox"]::before {
        content: "";
        width: var(--choice-check-width);
        height: var(--choice-check-height);
        border-left: var(--border-strong-width) solid var(--ink);
        border-bottom: var(--border-strong-width) solid var(--ink);
        transform: rotate(-45deg) scale(0);
        transform-origin: center;
        transition: transform .08s ease;
    }

    .switch-row input[type="checkbox"]::before {
        border-left: var(--border-strong-width) solid var(--ink);
        border-bottom: var(--border-strong-width) solid var(--ink);
        transform-origin: center;
    }

    input[type="checkbox"]:checked::before {
        transform: rotate(-45deg) scale(1);
    }

    input[type="checkbox"]:focus-visible {
        outline-offset: var(--focus-offset);
    }

    input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: var(--choice-size);
        height: var(--choice-size);
        min-height: var(--choice-size);
        min-width: var(--choice-size);
        border: var(--border-width) solid var(--line-strong);
        border-radius: var(--radius-circle);
        background: var(--surface-pure);
        display: inline-grid;
        place-content: center;
        cursor: pointer;
        margin: 0;
    }

    input[type="radio"]::before {
        content: "";
        width: var(--choice-mark-size);
        height: var(--choice-mark-size);
        border-radius: var(--radius-circle);
        background: var(--accent-strong);
        transform: scale(0);
        transition: transform .08s ease;
    }

    input[type="radio"]:checked {
        border-color: var(--accent-strong);
        background: var(--accent-soft-2);
    }

    input[type="radio"]:checked::before {
        transform: scale(1);
    }

    input[type="radio"]:focus-visible {
        outline: 0;
        box-shadow: var(--focus-shadow);
    }

    input[type="checkbox"]:checked {
        border-color: var(--accent-strong);
        background: var(--accent);
    }

    input[type="checkbox"]:focus-visible {
        outline: 0;
        box-shadow: var(--focus-shadow);
    }

    .switch-row input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: var(--switch-width) !important;
        height: var(--switch-height) !important;
        min-height: var(--switch-height) !important;
        border: var(--border-width) solid var(--text-subtle);
        border-radius: var(--radius-pill);
        background: var(--line-strong);
        display: inline-block;
        position: relative;
        margin: 0 var(--space-2) 0 0;
        vertical-align: middle;
        cursor: pointer;
        transition: background .12s ease,border-color .12s ease;
    }

    .switch-row input[type="checkbox"]::before {
        content: "";
        position: absolute;
        width: var(--switch-knob-size);
        height: var(--switch-knob-size);
        border: 0;
        border-radius: var(--radius-circle);
        background: var(--surface-pure);
        box-shadow: var(--switch-shadow);
        left: var(--switch-inset);
        top: var(--switch-inset);
        transform: none;
        transition: left .12s ease;
    }

    .switch-row input[type="checkbox"]:checked {
        background: var(--accent);
        border-color: var(--accent-strong);
    }

    .switch-row input[type="checkbox"]:checked::before {
        left: calc(var(--switch-width) - var(--switch-knob-size) - var(--switch-inset));
        transform: none;
    }

    .switch-row input[type="checkbox"]:focus-visible {
        outline: 0;
        box-shadow: var(--focus-shadow);
    }

    input[type="checkbox"]:disabled,
    input[type="radio"]:disabled {
        opacity: var(--disabled-opacity);
        cursor: not-allowed;
    }
    @media(max-width:760px) {
        .modal-foot>.button {
            min-height: max(var(--control-height),
                calc(var(--type-label) * var(--leading-label) * 2 + var(--space-1) * 2 + var(--border-width) * 2));
        }
        .modal-foot>.button:is(.primary, .danger):last-child {
            grid-column: 2;
        }
    }
}