/*
 * System 13 control adapter.
 *
 * The reference language uses square geometry, thin structural borders, short
 * bracketed edges, Readex Pro control text, and fast functional focus states.
 * This file is loaded after the theme and feature styles so shared KolNovel
 * primitives and native controls share that treatment.
 */

/*
 * Resolve these aliases on the body as well as the document root. The active
 * light/dark palette is applied to `body`, so aliases computed only on `:root`
 * keep the light foreground when the body switches to dark mode.
 */
:root,
body {
    --s13-control-surface: var(--card, var(--background, #ffffff));
    --s13-control-surface-2: var(--muted, var(--background, #ffffff));
    --s13-control-foreground: var(--foreground, #171717);
    --s13-control-border: color-mix(in oklab, var(--s13-control-foreground) 24%, transparent);
    --s13-control-muted: color-mix(in oklab, var(--s13-control-foreground) 72%, transparent);
    --s13-control-danger: color-mix(in oklab, var(--destructive, #dc2626) 30%, var(--s13-control-foreground));
    --s13-control-warning: var(--starless-warning, var(--warning, #b7791f));
    --s13-control-success: var(--starless-success, var(--success, #287a3d));
    --s13-control-info: var(--link, #366ad3);
    --s13-control-transition: 140ms ease;
    --s13-control-font: var(--kol-font-ui), sans-serif;
}

/* This preset's softer foreground needs less fading on tinted input surfaces. */
html[data-starless-theme="cattpuctin"] body:not(.darkmode) {
    --s13-control-muted: color-mix(in oklab, var(--s13-control-foreground) 95%, transparent);
}

/* Keep shared primitives and legacy control vocabularies visually compatible. */
:where(
    .kol-ui-button,
    .kol-ui-input,
    .kol-ui-select,
    .kol-ui-textarea,
    .kol-ui-file-input,
    .kol-ui-checkbox,
    .kol-ui-radio,
    .kol-ui-range,
    .kol-btn,
    button:not([data-system13-unstyled]),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    select,
    textarea,
    input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"])
) {
    font-family: var(--s13-control-font) !important;
}

:where(
    .kol-ui-button,
    .kol-btn,
    button:not([data-system13-unstyled]),
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
) {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    transition-duration: 140ms;
    transition-timing-function: ease;
}

/*
 * Buttons: independent shape, appearance, color, and size axes.
 * Legacy modifier classes below continue to map onto these same axes.
 */
.kol-ui-button,
.kol-btn {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 2px !important;
    background-color: var(--button-fill-background) !important;
    border-color: var(--button-fill-background) !important;
    color: var(--button-fill-text) !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: none;

    --button-color: var(--primary, #6d0015);
    --button-fill-background: color-mix(in srgb, var(--primary, #6d0015) 12%, transparent);
    --button-fill-text: var(--foreground, #171717);
    --surface-hover: color-mix(in srgb, var(--primary, #6d0015) 11%, transparent);
    --light-overlay: rgba(255, 255, 255, 0.1);
    --dark-overlay: rgba(0, 0, 0, 0.14);
}

.kol-btn {
    min-height: 2.625rem;
    padding: 0.5625rem 1.0625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

/* Color roles. Secondary outlines use its foreground token for contrast. */
.kol-ui-button.color-primary,
.kol-btn.color-primary,
.kol-ui-button--primary,
.kol-ui-button--accent,
.kol-btn.primary {
    --button-color: var(--primary, #6d0015);
    --button-fill-background: var(--primary, #6d0015);
    --button-fill-text: var(--primary-foreground, #ffffff);
    --surface-hover: color-mix(in srgb, var(--primary, #6d0015) 11%, transparent);
    --light-overlay: rgba(255, 255, 255, 0.1);
    --dark-overlay: rgba(0, 0, 0, 0.14);
}

.kol-ui-button.color-secondary,
.kol-btn.color-secondary,
.kol-ui-button--secondary,
.kol-ui-button--neutral,
.kol-ui-button--success,
.kol-ui-button--warning,
.kol-btn.secondary {
    --button-color: var(--secondary-foreground, var(--foreground, #171717));
    --button-fill-background: var(--secondary, #eeeeee);
    --button-fill-text: var(--secondary-foreground, var(--foreground, #171717));
    --surface-hover: color-mix(in srgb, var(--button-color) 9%, transparent);
    --light-overlay: rgba(255, 255, 255, 0.14);
    --dark-overlay: rgba(0, 0, 0, 0.08);
}

.kol-ui-button.color-destructive,
.kol-btn.color-destructive,
.kol-ui-button--destructive,
.kol-ui-button--danger,
.kol-btn.danger,
.kol-btn.destructive,
.kol-btn.error {
    --button-color: var(--s13-control-danger);
    --button-fill-background: var(--destructive, #dc2626);
    --button-fill-text: var(--destructive-foreground, #ffffff);
    --surface-hover: color-mix(in srgb, var(--destructive, #dc2626) 11%, transparent);
    --light-overlay: rgba(255, 255, 255, 0.09);
    --dark-overlay: rgba(0, 0, 0, 0.14);
}

/* Retain the informational role as a primary-color alias. */
.kol-ui-button--info {
    --button-color: var(--primary, #6d0015);
    --button-fill-background: var(--primary, #6d0015);
    --button-fill-text: var(--primary-foreground, #ffffff);
    --surface-hover: color-mix(in srgb, var(--primary, #6d0015) 11%, transparent);
}

/* Legacy appearance names map to the new appearance axis. */
.kol-ui-button--outline,
.kol-ui-button--dashed,
.kol-btn.outline {
    background-color: transparent !important;
    border-color: var(--button-color) !important;
    color: var(--button-color) !important;
}

.kol-ui-button--ghost,
.kol-ui-button--link,
.kol-btn.ghost,
.kol-btn.link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--button-color) !important;
}

/* Canonical appearance axis. */
.kol-ui-button.appearance-fill,
.kol-btn.appearance-fill {
    background-color: var(--button-fill-background) !important;
    border-color: var(--button-fill-background) !important;
    color: var(--button-fill-text) !important;
}

.kol-ui-button.appearance-outline,
.kol-btn.appearance-outline {
    background-color: transparent !important;
    border-color: var(--button-color) !important;
    color: var(--button-color) !important;
}

.kol-ui-button.appearance-ghost,
.kol-btn.appearance-ghost {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--button-color) !important;
}

/* Shapes. The default stays soft for buttons using the legacy API. */
.kol-ui-button.shape-soft,
.kol-btn.shape-soft {
    border-radius: 2px !important;
    clip-path: none;
}

.kol-ui-button.shape-cut,
.kol-btn.shape-cut {
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Sizes use fixed dimensions from the requested token scale. */
.kol-ui-button.size-sm,
.kol-btn.size-sm {
    min-height: 34px;
    padding: 0 13px;
    font-size: 11px;
}

.kol-ui-button.size-md,
.kol-btn.size-md {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
}

.kol-ui-button.size-lg,
.kol-btn.size-lg {
    min-height: 50px;
    padding: 0 24px;
    font-size: 14px;
}

/* Preserve established sizing and the square icon-button utility. */
.kol-ui-button--small {
    min-height: var(--kol-ui-size, 2rem);
    padding: 0.35rem var(--kol-ui-btn-p, 0.75rem);
    font-size: var(--kol-ui-fontsize, 0.8rem);
}

.kol-ui-button--tiny {
    min-height: var(--kol-ui-size, 1.65rem);
    padding: 0.2rem var(--kol-ui-btn-p, 0.5rem);
    font-size: var(--kol-ui-fontsize, 0.7rem);
}

.kol-ui-button--square {
    width: var(--kol-ui-size, 2.5rem);
    min-width: var(--kol-ui-size, 2.5rem);
    padding: 0;
}

.kol-btn.sm {
    min-height: 2.125rem;
    padding: 0.4375rem 0.8125rem;
    font-size: 0.6875rem;
}

/* Keep Arabic primary labels' joined letterforms and typeface. */
.kol-ui-button--primary,
.kol-btn.primary {
    font-family: var(--kol-font-ui), sans-serif !important;
    font-weight: 700;
    letter-spacing: normal;
}

/* Legacy link buttons retain their compact footprint. */
.kol-ui-button--link,
.kol-btn.link {
    min-height: auto;
    padding-inline: 0.125rem;
    text-decoration: none !important;
}

.kol-ui-button--dashed {
    border-style: dashed !important;
}

.kol-ui-button::before,
.kol-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

/*
 * Shape + appearance hover treatments. The legacy selectors preserve the
 * current modifier API while allowing the new axes to work independently.
 */
.kol-ui-button:not(.shape-cut).appearance-outline::before,
.kol-btn:not(.shape-cut).appearance-outline::before,
.kol-ui-button:not(.shape-cut):not(.appearance-fill):not(.appearance-ghost):is(.kol-ui-button--outline, .kol-ui-button--dashed)::before,
.kol-btn:not(.shape-cut):not(.appearance-fill):not(.appearance-ghost).outline::before {
    inset: 0;
    background: var(--surface-hover);
    opacity: 0;
}

.kol-ui-button:not(.shape-cut).appearance-ghost::before,
.kol-btn:not(.shape-cut).appearance-ghost::before,
.kol-ui-button:not(.shape-cut):not(.appearance-fill):not(.appearance-outline):is(.kol-ui-button--ghost, .kol-ui-button--link)::before,
.kol-btn:not(.shape-cut):not(.appearance-fill):not(.appearance-outline):is(.ghost, .link)::before {
    inset: 0;
    border-radius: inherit;
    background: var(--surface-hover);
    opacity: 0;
}

.kol-ui-button.shape-soft:is(.appearance-outline, .appearance-ghost)::before,
.kol-btn.shape-soft:is(.appearance-outline, .appearance-ghost)::before {
    inset: -55% -30%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--surface-hover), transparent 72%);
    opacity: 0;
    transform: scale(0.38);
    transform-origin: center;
}

/* Cut corners use one small, appearance-specific hover cue each. */
.kol-ui-button.shape-cut::before,
.kol-btn.shape-cut::before {
    inset: 0;
    opacity: 0;
}

.kol-ui-button.shape-cut.appearance-outline::before,
.kol-btn.shape-cut.appearance-outline::before,
.kol-ui-button.shape-cut:not(.appearance-fill):not(.appearance-ghost):is(.kol-ui-button--outline, .kol-ui-button--dashed)::before,
.kol-btn.shape-cut:not(.appearance-fill):not(.appearance-ghost).outline::before {
    background: var(--surface-hover);
    transform: scaleX(0);
    transform-origin: right;
}

.kol-ui-button.shape-cut.appearance-ghost::before,
.kol-btn.shape-cut.appearance-ghost::before,
.kol-ui-button.shape-cut:not(.appearance-fill):not(.appearance-outline):is(.kol-ui-button--ghost, .kol-ui-button--link)::before,
.kol-btn.shape-cut:not(.appearance-fill):not(.appearance-outline):is(.ghost, .link)::before {
    inset: auto 0.75rem 0.35rem;
    height: 2px;
    background: var(--button-color);
    transform: scaleX(0);
    transform-origin: right;
}

@media (hover: hover) and (pointer: fine) {
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]),
    .kol-btn:not(:disabled):not([aria-disabled="true"]) {
        transition: background-color 160ms ease, border-color 180ms ease, color 180ms ease;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"])::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"])::before {
        transition: opacity 180ms ease, transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    /* Filled controls acknowledge hover with color and edge contrast only. */
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):is(
        .appearance-fill,
        :not(.appearance-outline):not(.appearance-ghost):not(.kol-ui-button--outline):not(.kol-ui-button--dashed):not(.kol-ui-button--ghost):not(.kol-ui-button--link)
    ):not(.kol-ui-join__item):is(:hover, :focus-visible),
    .kol-btn:not(:disabled):not([aria-disabled="true"]):is(
        .appearance-fill,
        :not(.appearance-outline):not(.appearance-ghost):not(.outline):not(.ghost):not(.link)
    ):is(:hover, :focus-visible) {
        background-color: color-mix(in srgb, var(--button-fill-background) 92%, var(--button-fill-text) 8%) !important;
        border-color: color-mix(in srgb, var(--button-color) 80%, var(--button-fill-text) 20%) !important;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):not(.shape-cut).appearance-outline:hover,
    .kol-btn:not(:disabled):not([aria-disabled="true"]):not(.shape-cut).appearance-outline:hover,
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):not(.shape-cut):not(.appearance-fill):not(.appearance-ghost):is(.kol-ui-button--outline, .kol-ui-button--dashed):hover,
    .kol-btn:not(:disabled):not([aria-disabled="true"]):not(.shape-cut):not(.appearance-fill):not(.appearance-ghost).outline:hover {
        border-color: color-mix(in srgb, var(--button-color) 78%, white 22%) !important;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):not(.shape-cut).appearance-outline:hover::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]):not(.shape-cut).appearance-outline:hover::before,
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):not(.shape-cut):not(.appearance-fill):not(.appearance-ghost):is(.kol-ui-button--outline, .kol-ui-button--dashed):hover::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]):not(.shape-cut):not(.appearance-fill):not(.appearance-ghost).outline:hover::before {
        opacity: 1;
    }

    /* Outlines fill from the leading edge while keeping their transparent base. */
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-outline, .kol-ui-button--outline, .kol-ui-button--dashed):is(:hover, :focus-visible),
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-outline, .outline):is(:hover, :focus-visible) {
        border-color: color-mix(in srgb, var(--button-color) 82%, white 18%) !important;
        background-color: transparent !important;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-outline, .kol-ui-button--outline, .kol-ui-button--dashed):is(:hover, :focus-visible)::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-outline, .outline):is(:hover, :focus-visible)::before {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Ghost cuts stay borderless and draw a short accent rail under the label. */
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-ghost, .kol-ui-button--ghost, .kol-ui-button--link):is(:hover, :focus-visible),
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-ghost, .ghost, .link):is(:hover, :focus-visible) {
        border-color: transparent !important;
        background-color: var(--surface-hover) !important;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-ghost, .kol-ui-button--ghost, .kol-ui-button--link):is(:hover, :focus-visible)::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-cut:is(.appearance-ghost, .ghost, .link):is(:hover, :focus-visible)::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):not(.shape-cut).appearance-ghost:hover::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]):not(.shape-cut).appearance-ghost:hover::before,
    .kol-ui-button:not(:disabled):not([aria-disabled="true"]):not(.shape-cut):not(.appearance-fill):not(.appearance-outline):is(.kol-ui-button--ghost, .kol-ui-button--link):hover::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]):not(.shape-cut):not(.appearance-fill):not(.appearance-outline):is(.ghost, .link):hover::before {
        opacity: 1;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-soft:is(.appearance-outline, .appearance-ghost)::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-soft:is(.appearance-outline, .appearance-ghost)::before {
        transition: opacity 480ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-soft:is(.appearance-outline, .appearance-ghost):is(:hover, :focus-visible),
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-soft:is(.appearance-outline, .appearance-ghost):is(:hover, :focus-visible) {
        transform: none !important;
        translate: none !important;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-cut:is(:hover, :focus-visible),
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-cut:is(:hover, :focus-visible) {
        transform: none !important;
        translate: none !important;
    }

    .kol-ui-button:not(:disabled):not([aria-disabled="true"]).shape-soft:is(.appearance-outline, .appearance-ghost):is(:hover, :focus-visible)::before,
    .kol-btn:not(:disabled):not([aria-disabled="true"]).shape-soft:is(.appearance-outline, .appearance-ghost):is(:hover, :focus-visible)::before {
        opacity: 1;
        transform: scale(1);
    }

    .kol-ui-button--link:hover,
    .kol-btn.link:hover {
        text-decoration: underline !important;
        text-underline-offset: 0.25rem;
    }
}

.kol-ui-button--link:focus-visible,
.kol-btn.link:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .kol-ui-button,
    .kol-ui-button::before,
    .kol-btn,
    .kol-btn::before {
        transition: none !important;
    }
}

/* Text links use the same System 13 mono/underline treatment as LINK buttons. */
.tw\:text-brand {
    color: var(--primary, #6d0015);
}

.tw\:text-rating {
    color: var(--rating-text, var(--rating));
}

.kol-ui-link {
    --s13-link-color: var(--s13-control-foreground);
    color: var(--s13-link-color) !important;
    font-family: var(--s13-control-font) !important;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    text-underline-offset: 0.25rem;
    transition: color var(--s13-control-transition), text-decoration-color var(--s13-control-transition);
}

.kol-ui-link--primary,
.kol-ui-link--accent {
    --s13-link-color: var(--primary, #6d0015);
}

.kol-ui-link--secondary,
.kol-ui-link--neutral {
    --s13-link-color: var(--s13-control-muted);
}

.kol-ui-link--danger,
.kol-ui-link--danger {
    --s13-link-color: var(--s13-control-danger);
}

.kol-ui-link:hover,
.kol-ui-link:focus-visible {
    color: var(--s13-link-color) !important;
    text-decoration: underline !important;
}

.kol-ui-link:focus-visible {
    outline: 1px solid var(--primary, #6d0015) !important;
    outline-offset: 3px;
}

/* Novel titles use a display face instead of the control monospace face. */
[data-kol-series-title-source],
.kol-series-editorial__title {
    font-family: var(--kol-font-ui), sans-serif !important;
}

/* The dashed legacy appearance remains an outline. */
.kol-ui-button--dashed {
    border-style: dashed !important;
}

/* Selected utilities use the same quiet surface as the canonical toggle. */
.kol-ui-button--selected,
.kol-ui-button[aria-pressed="true"],
.kol-ui-button.is-active,
.kol-btn[aria-pressed="true"],
.kol-btn.is-active {
    border-color: var(--button-color) !important;
    background-color: color-mix(in srgb, var(--button-color) 14%, transparent) !important;
    color: var(--button-color) !important;
}

@media (hover: hover) and (pointer: fine) {
    .kol-ui-button.shape-cut.appearance-outline[aria-pressed="true"]:hover,
    .kol-ui-button.shape-cut.appearance-outline.is-active:hover,
    .kol-ui-button.shape-cut.appearance-outline.kol-ui-button--selected:hover,
    .kol-ui-button.shape-cut.kol-ui-button--outline[aria-pressed="true"]:hover,
    .kol-ui-button.shape-cut.kol-ui-button--outline.is-active:hover,
    .kol-ui-button.shape-cut.kol-ui-button--outline.kol-ui-button--selected:hover,
    .kol-ui-button.shape-cut.kol-ui-button--dashed[aria-pressed="true"]:hover,
    .kol-ui-button.shape-cut.kol-ui-button--dashed.is-active:hover,
    .kol-ui-button.shape-cut.kol-ui-button--dashed.kol-ui-button--selected:hover,
    .kol-btn.shape-cut.appearance-outline[aria-pressed="true"]:hover,
    .kol-btn.shape-cut.appearance-outline.is-active:hover,
    .kol-btn.shape-cut.outline[aria-pressed="true"]:hover,
    .kol-btn.shape-cut.outline.is-active:hover {
        background-color: transparent !important;
    }
}

.kol-ui-button:focus-visible,
.kol-btn:focus-visible,
:where(button:not(.kol-ui-tab):not([data-system13-unstyled]):not(.kol-btn)):focus-visible {
    outline: 1px solid var(--primary, #6d0015) !important;
    outline-offset: 3px;
}

.kol-ui-button:active:not(:disabled, .kol-ui-button--disabled),
.kol-btn:active:not(:disabled, .kol-ui-button--disabled),
:where(button:not(.kol-ui-tab):not([data-system13-unstyled]):not(.kol-btn)):active:not(:disabled, .kol-ui-button--disabled) {
    transform: none !important;
    translate: 0;
}

.kol-ui-button--outline,
.kol-ui-button--dashed {
    box-shadow: none !important;
}

/* Give legacy button elements the same partial-border silhouette. */
button:not(.kol-ui-tab):not(.kol-ui-join__item):not([data-system13-unstyled]):not(.kol-ui-button):not(.kol-btn) {
    position: relative;
    border-color: transparent !important;
}

/* Replaced submit controls cannot draw pseudo-elements, so use four short rails. */
input[type="submit"],
input[type="button"],
input[type="reset"] {
    --s13-input-edge: 0.5rem;
    border-color: transparent !important;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor) !important;
    background-position: left top, left bottom, right top, right bottom;
    background-repeat: no-repeat;
    background-size: var(--s13-input-edge) 1px, var(--s13-input-edge) 1px, var(--s13-input-edge) 1px, var(--s13-input-edge) 1px;
}

@media (hover: hover) {
    input[type="submit"]:hover,
    input[type="button"]:hover,
    input[type="reset"]:hover {
        --s13-input-edge: 0.75rem;
    }
}

/* Inputs: square one-pixel frames with a short, visible focus state. */
:where(
    .kol-ui-input,
    .kol-ui-select,
    .kol-ui-textarea,
    .kol-ui-file-input,
    select,
    textarea,
    input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"])
) {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: border-color var(--s13-control-transition), outline-color var(--s13-control-transition), background-color var(--s13-control-transition);
}

:where(.kol-ui-input, .kol-ui-select, .kol-ui-textarea, .kol-ui-file-input, select, textarea, input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"])):focus,
:where(.kol-ui-input, .kol-ui-select, .kol-ui-textarea, .kol-ui-file-input, select, textarea, input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"])):focus-within {
    box-shadow: none !important;
    outline: 1px solid var(--primary, #6d0015) !important;
    outline-offset: 2px;
}

/* Keep selector controls square as well. */
.kol-ui-checkbox,
.kol-ui-radio {
    border-radius: 0 !important;
    background-color: transparent;
    background-image: none;
    box-shadow: none !important;
}

.kol-ui-checkbox:checked,
.kol-ui-checkbox[aria-checked="true"],
.kol-ui-radio:checked,
.kol-ui-radio[aria-checked="true"] {
    background-color: transparent;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 42% 42%;
}

.kol-ui-checkbox:focus-visible,
.kol-ui-radio:focus-visible {
    outline: 1px solid var(--primary, #6d0015) !important;
    outline-offset: 3px;
}

.kol-ui-range {
    border-radius: 0;
}

.kol-ui-range::-webkit-slider-thumb,
.kol-ui-range::-moz-range-thumb {
    border-radius: 0;
    box-shadow: none;
}

:where(.kol-ui-button, .kol-btn, button, input[type="submit"], input[type="button"], input[type="reset"], .kol-ui-input, .kol-ui-select, .kol-ui-textarea, .kol-ui-file-input, select, textarea, .kol-ui-checkbox, .kol-ui-radio, .kol-ui-toggle, .kol-ui-range):disabled,
:where(.kol-ui-button, .kol-btn)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}