/**
 * Buttons
 * Load order: `base.css` → `main.css` → `text.css` → this file (`app.html`).
 *
 * BASE
 *   .btn               — Core button. All variants stack on top of this class. Owns shared
 *                        disabled (opacity + cursor), focus-visible (accent ring), hover
 *                        (highlight bg), and active (opacity pulse) behavior.
 *
 * COLOR VARIANTS        Stack with `.btn`, e.g. `class="btn btn-primary"` (variants use `.btn.btn-*`
 *                       in CSS so unified `.btn { border; background }` blocks cannot override).
 *   .btn-primary        Filled accent bg — primary actions (submit, save, confirm).
 *   .btn-secondary      Outlined, neutral bg — cancel / secondary actions.
 *   .btn-danger         Neutral at rest (same shell as secondary); turns red + light tint on hover.
 *   .btn-danger-solid   Solid error fill + light text at rest — high-attention destroy / erase.
 *
 * SIZE MODIFIERS        Stack freely, e.g. `class="btn btn-primary btn-sm btn-block"`.
 *   .btn-sm             Compact padding + caption font size — table rows, folding card headers.
 *   .btn-block          Full-width flex — auth forms (sign-in, sign-up, delete account flow).
 *
 * SPECIAL VARIANTS      Standalone — do not stack color modifiers on these.
 *   .btn-terminal       Monospace, uppercase — terminal-adjacent controls.
 *   .btn-dialog-dismiss Small square icon-only × — close button injected by `customDialog.svelte`.
 *   .btn-split          Primary action + chevron dropdown composite — carried from the base
 *                       template; not currently used in this service.
 */

.btn {
    padding: 0.35em 0.75em;
    font-family: inherit;
    font-size: var(--font-size-button);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    border-radius: 4px;
    user-select: none;
    transition:
        background-color var(--animation-duration-fast),
        border-color var(--animation-duration-fast),
        color var(--animation-duration-fast),
        opacity var(--animation-duration-fast);
}

.btn-terminal {
    padding: 0.2em 0.55em;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, Monaco, Consolas,
        monospace;
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/**//**//**//**//**//**//**//**//**/
/* Sizing variants */

.btn-sm {
    padding: 0.25em 0.55em;
    font-size: var(--font-size-caption, 0.8rem);
}

/* `.btn.btn-block` beats `.btn { display: inline-flex }` regardless of section order. */
.btn.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/**//**//**//**//**//**//**//**//**/

/* Dialog dismiss (×) — icon only; `customDialog` adds `.custom-dialog-close` for absolute position in the shell. */
.btn-dialog-dismiss {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border-radius: 0;
    color: var(--app-text-dim);
}

/**
 * Split control: primary action + optional chevron (dropdown).
 * Mirrors a “primary + split dropdown” pattern (e.g. VS Code toolbar).
 * Structure: `.btn-split` > `.btn-split__primary` (+ optional `.btn-split__menu` > `.btn-split__chevron` + menu).
 * Modifier: `.btn-split--off` — optional hook when the parent feature is inactive (add rules if needed).
 */
.btn-split {
    align-self: center;
    height: calc(100% - 4px);
    max-height: 20px;
    overflow: visible;
    border-radius: 3px;
}

/**//**//**//**//**//**//**//**//**/
/* Color modifiers — after base `.btn` border/bg/text so these win at equal specificity */

.btn.btn-primary {
    border: 2px solid var(--app-border);
    background: var(--app-accent);
    color: var(--app-bg);
}

.btn.btn-secondary {
    border: 2px solid var(--app-border);
    background: var(--app-bg);
    color: var(--app-text);
}

.btn.btn-danger {
    border: 2px solid var(--app-border);
    background: var(--app-bg);
    color: var(--app-text);
}

.btn.btn-danger-solid {
    border: 2px solid var(--app-error, #cc0000);
    background: var(--app-error, #cc0000);
    color: var(--app-bg, #ffffff);
}

/**
 * Unified style variables for classes
 */

.btn,
.btn-dialog-dismiss {
    display: inline-flex;
}

.btn,
.btn-split__primary,
.btn-split__chevron,
.btn-dialog-dismiss {
    align-items: center;
    justify-content: center;
    margin: 0;
}

.btn,
.btn-split {
    border: 1px solid var(--app-border);
    background: var(--app-bg);
}

.btn,
.btn-split__primary,
.btn-split__chevron {
    color: var(--app-text);
}

.btn,
.btn-split__primary,
.btn-split__chevron,
.btn-dialog-dismiss {
    cursor: pointer;
}

.btn-dialog-dismiss,
.btn-dialog-dismiss__icon,
.btn-split__primary,
.btn-split__chevron {
    line-height: 1;
}

.btn-dialog-dismiss,
.btn-split__primary,
.btn-split__chevron,
.btn-dialog-dismiss:hover,
.btn-dialog-dismiss:focus-visible {
    background: transparent;
}

.btn-dialog-dismiss,
.btn-dialog-dismiss:hover,
.btn-dialog-dismiss:focus-visible {
    box-shadow: none;
}

.btn-split,
.btn-split__menu {
    position: relative;
}

.btn-split,
.btn-split__menu,
.btn-split__primary,
.btn-split__chevron {
    display: flex;
}

.btn-split,
.btn-split__icon {
    flex-shrink: 0;
}

.btn-split,
.btn-split__menu {
    align-items: stretch;
}

.btn-dialog-dismiss,
.btn-split__primary,
.btn-split__chevron {
    border: none;
}

.btn-terminal,
.btn-split__primary--solo {
    border-radius: 2px;
}

button.btn,
.btn-dialog-dismiss {
    appearance: none;
}

.btn:disabled,
.btn-split__primary:disabled,
.btn-split__chevron:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:hover:not(:disabled),
.btn-split__primary:hover:not(:disabled),
.btn-split__chevron:hover:not(:disabled) {
    background: var(--app-bg-highlight);
}

/**//**//**//**//**//**//**//**//**/

.btn-dialog-dismiss__icon {
    font-size: 1.25rem;
    font-weight: 300;
    pointer-events: none;
}

.btn-dialog-dismiss:hover,
.btn-dialog-dismiss:focus-visible {
    color: var(--app-error);
}

.btn-split__primary,
.btn-split__chevron {
    padding: 0 5px;
    transition: background 0.1s;
}

.btn-split__primary {
    min-width: 22px;
    border-radius: 2px 0 0 2px;
}

.btn-split__chevron {
    min-width: 18px;
    padding: 0 4px;
    border-left: 1px solid var(--app-border);
    border-radius: 0 2px 2px 0;
}

.btn-split__primary:focus-visible,
.btn-split__chevron:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--app-active);
}

.btn-split__icon {
    display: block;
    opacity: 0.9;
}

/**//**//**//**//**//**//**//**//**/
/* Anchors / interaction — auth uses `.btn.btn-primary.btn-block`; shared disabled + focus on `.btn` */

a.btn {
    text-decoration: none;
}

.btn:hover:not(:disabled) {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

/* Press feedback for default / secondary only — filled variants keep their own background. */
.btn:active:not(:disabled):not(.btn-primary, .btn-danger, .btn-danger-solid) {
    background: var(--app-bg);
}

.btn:focus-visible {
    outline: 2px solid var(--app-active);
}

.btn-dialog-dismiss:focus-visible {
    outline: 1px solid var(--app-error);
}

/**//**//**//**//**//**//**//**//**/

.btn.btn-primary:hover:not(:disabled) {
    border-color: var(--app-border);
    background: var(--app-accent);
    color: var(--app-bg);
}

.btn.btn-primary:active:not(:disabled) {
    opacity: 0.85;
}

/**//**//**//**//**//**//**//**//**/

.btn.btn-secondary:hover:not(:disabled) {
    background: var(--app-bg-highlight);
}

/**//**//**//**//**//**//**//**//**/

.btn.btn-danger:hover:not(:disabled) {
    border-color: var(--app-error, #cc0000);
    color: var(--app-error, #cc0000);
    background: color-mix(in srgb, var(--app-error, #cc0000) 24%, var(--app-bg));
}

.btn.btn-danger-solid:hover:not(:disabled) {
    border-color: var(--app-error, #cc0000);
    color: var(--app-bg, #ffffff);
    background: color-mix(in srgb, var(--app-error, #cc0000) 82%, #000000);
}

.btn.btn-danger:focus-visible,
.btn.btn-danger-solid:focus-visible {
    outline: 2px solid var(--app-error, #cc0000);
}

/**//**//**//**//**//**//**//**//**/

.btn:focus-visible,
.btn.btn-danger:focus-visible,
.btn.btn-danger-solid:focus-visible,
.btn-dialog-dismiss:focus-visible {
    outline-offset: 2px;
}

.btn.btn-danger:active:not(:disabled),
.btn.btn-danger-solid:active:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.btn:active:not(:disabled):not(.btn-primary, .btn-danger, .btn-danger-solid) {
    opacity: 0.92;
}