/*
 * Ink button skin for public Starless controls.
 * The legacy kol-ui-button--offset class remains the opt-in compatibility
 * marker used by existing templates; it now applies the flat Ink treatment.
 * Colors follow the active Starless tokens so palette and light/dark changes
 * continue to flow through without page-specific markup changes.
 */
.kol-ui-button--offset {
    --kol-offset-paper: var(--background, #fff);
    --kol-offset-raised: var(--card, var(--background, #fff));
    --kol-offset-ink: var(--foreground, #171717);
    --kol-offset-muted: var(--muted-foreground, #777);
    --kol-offset-line: var(--border, #ddd);
    --kol-offset-line-strong: color-mix(in srgb, var(--kol-offset-line) 50%, var(--kol-offset-ink));
    --kol-offset-accent: var(--primary, #6d0015);
    --kol-offset-on-accent: var(--primary-foreground, var(--background, #fff));
    --kol-offset-accent-soft: color-mix(in srgb, var(--kol-offset-accent) 10%, var(--kol-offset-raised));
    --kol-offset-danger: var(--destructive, #dc2626);
    --kol-offset-on-danger: var(--destructive-foreground, var(--background, #fff));
    --kol-offset-danger-soft: color-mix(in srgb, var(--kol-offset-danger) 10%, var(--kol-offset-raised));
    --kol-offset-focus: var(--ring, var(--kol-offset-accent));

    box-sizing: border-box;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 17px;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--kol-offset-ink) !important;
    box-shadow: none !important;
    font-family: var(--kol-font-ui, sans-serif), sans-serif;
    font-size: 12.5px;
    font-weight: 570;
    letter-spacing: .015em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none !important;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease;
    transform: none !important;
    translate: none !important;
    -webkit-tap-highlight-color: transparent;
}

.kol-ui-button--offset::before,
.kol-ui-button--offset::after {
    content: none !important;
    display: none !important;
}

/* Override shape presets that would otherwise clip or square the shared skin. */
.kol-ui-button.kol-ui-button--offset:not(.kol-ui-button--link) {
    border-radius: 3px !important;
    clip-path: none !important;
}

.kol-ui-button.kol-ui-button--offset.kol-ui-button--link {
    border-radius: 0 !important;
    clip-path: none !important;
}

.kol-ui-button--offset:focus-visible {
    outline: 2px solid var(--kol-offset-focus) !important;
    outline-offset: 3px;
}

/* Primary is the default when no other semantic variant is present. */
.kol-ui-button--offset.kol-ui-button--primary,
.kol-ui-button--offset.color-primary,
.kol-ui-button--offset:not(
    .kol-ui-button--secondary,
    .kol-ui-button--outline,
    .kol-ui-button--ghost,
    .kol-ui-button--danger,
    .kol-ui-button--destructive,
    .kol-ui-button--link,
    .color-secondary,
    .color-destructive,
    .color-danger,
    .appearance-outline,
    .appearance-ghost
) {
    border-color: var(--kol-offset-ink) !important;
    background-color: var(--kol-offset-ink) !important;
    color: var(--kol-offset-paper) !important;
}

.kol-ui-button--offset.kol-ui-button--primary:hover:not(:disabled):not([aria-disabled="true"]),
.kol-ui-button--offset.color-primary:hover:not(:disabled):not([aria-disabled="true"]),
.kol-ui-button--offset:not(
    .kol-ui-button--secondary,
    .kol-ui-button--outline,
    .kol-ui-button--ghost,
    .kol-ui-button--danger,
    .kol-ui-button--destructive,
    .kol-ui-button--link,
    .color-secondary,
    .color-destructive,
    .color-danger,
    .appearance-outline,
    .appearance-ghost
):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--kol-offset-accent) !important;
    background-color: var(--kol-offset-accent) !important;
    color: var(--kol-offset-on-accent) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--secondary, .color-secondary) {
    border-color: var(--kol-offset-line) !important;
    background-color: var(--kol-offset-raised) !important;
    color: var(--kol-offset-ink) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--secondary, .color-secondary):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--kol-offset-line-strong) !important;
    background-color: var(--kol-offset-accent-soft) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--outline, .appearance-outline) {
    border-color: var(--kol-offset-line-strong) !important;
    background-color: transparent !important;
    color: var(--kol-offset-ink) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--outline, .appearance-outline):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--kol-offset-accent) !important;
    color: var(--kol-offset-accent) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--outline, .appearance-outline)[aria-pressed="true"] {
    border-color: var(--kol-offset-accent) !important;
    background-color: var(--kol-offset-accent-soft) !important;
    color: var(--kol-offset-accent) !important;
}

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

.kol-ui-button--offset:is(.kol-ui-button--ghost, .appearance-ghost):hover:not(:disabled):not([aria-disabled="true"]),
.kol-ui-button--offset:is(.kol-ui-button--ghost, .appearance-ghost)[aria-pressed="true"] {
    color: var(--kol-offset-accent) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--danger, .kol-ui-button--destructive, .color-destructive, .color-danger) {
    border-color: transparent !important;
    background-color: var(--kol-offset-danger-soft) !important;
    color: var(--kol-offset-danger) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--danger, .kol-ui-button--destructive, .color-destructive, .color-danger):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--kol-offset-danger) !important;
    background-color: var(--kol-offset-danger) !important;
    color: var(--kol-offset-on-danger) !important;
}

.kol-ui-button--offset.kol-ui-button--link {
    min-height: auto;
    padding: 3px 0;
    border-color: transparent !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--kol-offset-ink) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--kol-offset-line-strong);
    text-underline-offset: 4px;
}

.kol-ui-button--offset.kol-ui-button--link:hover:not(:disabled):not([aria-disabled="true"]),
.kol-ui-button--offset.kol-ui-button--link:focus-visible {
    color: var(--kol-offset-accent) !important;
    text-decoration-color: var(--kol-offset-accent);
}

/* Keep selected and disabled controls legible without changing their shape. */
.kol-ui-button--offset:disabled,
.kol-ui-button--offset[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.42;
}

.kol-ui-button--offset[aria-busy="true"],
.kol-ui-button--offset.is-loading {
    cursor: progress;
}

/* Icon controls keep the existing generous touch target and stay visually compact. */
.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon) {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    aspect-ratio: 1;
    gap: 0;
    padding: 0 !important;
    margin: 0;
}

.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon):is(.kol-ui-button--ghost, .appearance-ghost) {
    color: var(--kol-offset-muted) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon):is(.kol-ui-button--ghost, .appearance-ghost):hover:not(:disabled):not([aria-disabled="true"]),
.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon):is(.kol-ui-button--ghost, .appearance-ghost)[aria-pressed="true"] {
    border-color: transparent !important;
    background-color: transparent !important;
    color: var(--kol-offset-accent) !important;
}

.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon):is(.kol-ui-button--outline, .appearance-outline),
.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon):is(.kol-ui-button--outline, .appearance-outline):hover:not(:disabled):not([aria-disabled="true"]),
.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon):is(.kol-ui-button--outline, .appearance-outline)[aria-pressed="true"] {
    background-color: transparent !important;
}

.kol-ui-button--offset :is(svg, .kol-ui-button__icon) {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.kol-ui-button--offset.size-sm,
.kol-ui-button--offset.kol-ui-button--tiny,
.kol-ui-button--offset.kol-ui-button--small {
    min-height: 34px;
    gap: 8px;
    padding-inline: 12px;
    font-size: 11px;
}

.kol-ui-button--offset.size-md {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 13px;
}

.kol-ui-button--offset.size-lg {
    min-height: 58px;
    gap: 17px;
    padding-inline: 25px;
    font-size: 15px;
}

.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon).size-sm,
.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon).kol-ui-button--tiny,
.kol-ui-button--offset:is(.kol-ui-button--square, .kol-ui-button--icon).kol-ui-button--small {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0 !important;
}

.kol-ui-button--offset.kol-ui-join__item {
    margin: 0;
}

.kol-ui-button--offset .kol-ui-button__arrow {
    margin-inline-start: 4px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.kol-ui-button--offset.is-loading {
    cursor: progress;
}

.kol-ui-button--offset .kol-ui-button__spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: kol-ink-button-spin 700ms linear infinite;
}

@keyframes kol-ink-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kol-ui-button--offset,
    .kol-ui-button--offset::before,
    .kol-ui-button--offset::after,
    .kol-ui-button--offset .kol-ui-button__arrow,
    .kol-ui-button--offset .kol-ui-button__spinner {
        transition: none !important;
        animation: none !important;
    }
}