/* Shared presentation: docs/components/web-app-captionator.md (context-free Fluid presentation). */
/* Medium Button and CardContainer geometry; one source for both rendering paths. */
.site-button-medium {
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
    padding: 10px 20px;
}
.site-card {
    border: 1px solid var(--mud-palette-border-secondary);
    border-radius: 10px;
    background: var(--mud-palette-background);
}
.site-brand {
    display: block;
    width: 186px;
    height: 32px;
    object-fit: contain;
}
/* Native equivalents at the context-free boundary retain HTML keyboard semantics.
   Visual values come from the same theme/Fluid layer as Button and Select. */
.site-static-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mud-typography-default-family);
    font-weight: var(--mud-typography-button-weight);
    line-height: var(--mud-typography-button-lineheight);
    border: 1px solid var(--mud-palette-button-secondary-border);
    background: var(--mud-palette-button-secondary-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}
.site-static-button:disabled {
    cursor: default;
}
input.site-static-input,
textarea.site-static-input,
select.site-static-select {
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-border-secondary);
    border-radius: 10px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: var(--mud-typography-default-weight);
}
input.site-static-input { width: 100%; }
textarea.site-static-input { width: 100%; resize: vertical; }
input.site-static-input::placeholder,
textarea.site-static-input::placeholder { color: var(--mud-palette-text-tertiary); }
input.site-static-input:focus-visible,
textarea.site-static-input:focus-visible,
select.site-static-select:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Exact existing Button disabled/focus rules shared with context-free actions. */
.button .mud-button-filled-error:disabled,
.button .mud-button-filled-primary:disabled,
.button .mud-button-filled-default:disabled ,
.site-static-button.mud-button-filled-primary:disabled {
    color: var(--mud-palette-white) !important;
    background-color: var(--mud-palette-button-base-primary-disabled) !important;
}
.button .mud-button-outlined-error:disabled,
.button .mud-button-outlined-primary:disabled,
.button .mud-button-outlined-default:disabled ,
.site-static-button.mud-button-outlined-primary:disabled {
    color: var(--mud-palette-text-tertiary);
    border-color: var(--mud-palette-button-secondary-border);
}
    .button .mud-button-outlined-primary:focus ,
.site-static-button.mud-button-outlined-primary:focus {
        box-shadow: 0px 0px 0px 2px #63708326;
    }
    .button .mud-button-filled-default:focus,
    .button .mud-button-filled-primary:focus,
    .button .mud-button-filled-error:focus ,
.site-static-button.mud-button-filled-primary:focus {
        box-shadow: 0px 0px 0px 2px #63708326;
    }

/* ---- Buttons: pill shape (icon buttons stay circular) ---- */
.mud-button-root:not(.mud-icon-button) {
    border-radius: 999px !important;
}

/* Keep MudButtonGroup members connected: square inner corners, pill the outer edges. */
.mud-button-group-root .mud-button-root:not(.mud-icon-button) {
    border-radius: 0 !important;
}
.mud-button-group-root .mud-button-root:not(.mud-icon-button):first-child {
    border-top-left-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
}
.mud-button-group-root .mud-button-root:not(.mud-icon-button):last-child {
    border-top-right-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
}

/* Primary filled -> indigo->violet gradient pill + soft glow */
.mud-button-filled-primary:not(:disabled):not(.mud-disabled) {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px var(--accent-glow) !important;
    color: #fff !important;
}
.mud-button-filled-primary:not(:disabled):not(.mud-disabled):hover {
    background: var(--accent-gradient-hover) !important;
    box-shadow: 0 8px 22px var(--accent-glow) !important;
}

/* Error/danger filled -> muted rose gradient (never fire-engine red) */
.mud-button-filled-error:not(:disabled):not(.mud-disabled) {
    background: var(--danger-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px var(--danger-glow) !important;
    color: #fff !important;
}
.mud-button-filled-error:not(:disabled):not(.mud-disabled):hover {
    background: var(--danger-gradient-hover) !important;
    box-shadow: 0 8px 22px var(--danger-glow) !important;
}

/* Outlined / text primary -> accent ink + soft tint hover (no saturated blue fill) */
.mud-button-outlined-primary:not(:disabled):not(.mud-disabled),
.mud-button-text-primary:not(:disabled):not(.mud-disabled) {
    color: var(--accent-ink) !important;
    border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent) !important;
}
.mud-button-outlined-primary:not(:disabled):not(.mud-disabled):hover,
.mud-button-text-primary:not(:disabled):not(.mud-disabled):hover {
    background-color: var(--accent-tint) !important;
}

/* Outlined / text error -> danger soft ink + soft rose hover */
.mud-button-outlined-error:not(:disabled):not(.mud-disabled),
.mud-button-text-error:not(:disabled):not(.mud-disabled) {
    color: var(--danger-soft-ink) !important;
    border-color: color-mix(in srgb, var(--danger-soft-ink) 45%, transparent) !important;
}
.mud-button-outlined-error:not(:disabled):not(.mud-disabled):hover,
.mud-button-text-error:not(:disabled):not(.mud-disabled):hover {
    background-color: var(--danger-soft-bg) !important;
}

/* Soft focus ring, not a hard outline */
.mud-button-root:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}