/* UI Kit v1: additive controls. Existing pages change only after explicit opt-in.
   Aliases resolve on body.site-page, where site.css defines the accepted palette;
   Home's local --text overrides do not redefine these inherited aliases. */
body.site-page {
    --ui-font: var(--font-ui);
    --ui-primary-fill: var(--ink);
    --ui-primary-text: var(--bg-deep);
    --ui-secondary-fill: var(--surface-2);
    --ui-secondary-text: var(--text);
    --ui-muted-text: var(--muted);
    --ui-focus-color: var(--app-nav-accent, var(--blue));
    --ui-control-radius: var(--radius-sm);
    --ui-control-focus-width: 3px;
    --ui-control-focus-offset: 3px;
    --ui-control-height-small: 44px;
    --ui-control-height-regular: 48px;
    --ui-control-height-hero: 53px;
    --ui-control-height-edit: 26px;
    --ui-control-hover-brightness: 1.08;
    --ui-control-pressed-brightness: .92;
    --ui-control-disabled-opacity: .45;
    --ui-control-transition: 180ms ease;
}

/* Current shared button defaults: flat fills, radius 3, no border or shadow.
   .button remains required; ui-button never captures legacy buttons on its own. */
.site-page .button.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: var(--ui-control-height-regular);
    padding: 12px 20px;
    border: 0;
    border-radius: var(--ui-control-radius);
    color: var(--ui-primary-text);
    background: var(--ui-primary-fill);
    box-shadow: none;
    font: 600 .875rem/1.4 var(--ui-font);
    letter-spacing: .01em;
    text-transform: lowercase;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    filter: none;
    transform: none;
    transition: filter var(--ui-control-transition), color var(--ui-control-transition);
}
.site-page .button.ui-button.ui-button--primary {
    min-height: var(--ui-control-height-hero);
    color: var(--ui-primary-text);
    background: var(--ui-primary-fill);
    font-weight: 700;
    letter-spacing: .06em;
}
.site-page .button.ui-button.ui-button--secondary {
    min-height: var(--ui-control-height-regular);
    color: var(--ui-secondary-text);
    background: var(--ui-secondary-fill);
    font-weight: 600;
    letter-spacing: .01em;
}
/* Size modifiers follow visual variants so a small Primary stays 44px. */
.site-page .button.ui-button.ui-button--small {
    min-height: var(--ui-control-height-small);
    padding: 10px 16px;
}
.site-page .button.ui-button.ui-button--regular { min-height: var(--ui-control-height-regular); }
.site-page .button.ui-button.ui-button--hero { min-height: var(--ui-control-height-hero); }
.site-page .button.ui-button.ui-button--wide { width: 100%; }

/* Approved compact edit role. Its solid Secondary fill is a new agreement;
   the inventory's previous profile fill was --app-nav-hover. This modifier is
   26px wherever used; production integration must preserve its mobile scope.
   A minimum, unitless leading and rem font let enlarged text grow naturally. */
.site-page .button.ui-button.ui-button--profile-edit {
    --ui-control-focus-width: 2px;
    --ui-control-focus-offset: 3px;
    min-height: var(--ui-control-height-edit);
    padding: 5px 8px;
    color: var(--ui-secondary-text);
    background: var(--ui-secondary-fill);
    font: 500 .6875rem/1.45454545 var(--ui-font);
    letter-spacing: 0;
    text-transform: none;
}

/* Current shared text action role: a 44px control with an underlined label. */
.site-page .text-button.ui-text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: var(--ui-control-height-small);
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    color: var(--ui-muted-text);
    background: transparent;
    box-shadow: none;
    font: 500 .8125rem/1.4 var(--ui-font);
    letter-spacing: 0;
    text-transform: lowercase;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: normal;
    cursor: pointer;
    filter: none;
    transform: none;
    transition: filter var(--ui-control-transition), color var(--ui-control-transition);
}
.site-page .ui-control-label { min-width: 0; overflow-wrap: anywhere; }

/* New explicit inline role. It keeps the surrounding text's font and has no
   invisible target extension, minimum height, or button-like layout. */
.site-page .ui-inline-link {
    display: inline;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ui-muted-text);
    background: transparent;
    box-shadow: none;
    font: inherit;
    line-height: 1.5;
    letter-spacing: inherit;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    filter: none;
    transform: none;
    transition: filter var(--ui-control-transition), color var(--ui-control-transition);
}

/* New opt-in icon family. Visual and pointer dimensions are the same; 36/40px
   are explicit compact variants, while the default minimum is 44px. */
.site-page .ui-icon-button {
    --ui-icon-button-size: 44px;
    --ui-control-focus-width: 2px;
    display: inline-grid;
    place-items: center;
    width: max-content;
    min-width: var(--ui-icon-button-size);
    min-height: var(--ui-icon-button-size);
    padding: 0;
    border: 0;
    border-radius: var(--ui-control-radius);
    color: var(--ui-muted-text);
    background: transparent;
    box-shadow: none;
    font: 400 1.5rem/1 var(--ui-font);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    filter: none;
    transform: none;
    transition: filter var(--ui-control-transition), color var(--ui-control-transition);
}
.site-page .ui-icon-button.ui-icon-button--36 { --ui-icon-button-size: 36px; }
.site-page .ui-icon-button.ui-icon-button--40 { --ui-icon-button-size: 40px; }
.site-page .ui-icon-button.ui-icon-button--44 { --ui-icon-button-size: 44px; }
.site-page .ui-icon-button > svg {
    grid-area: 1 / 1;
    display: block;
    width: 1em;
    height: 1em;
}

/* Existing filled-button hover brightness is retained. Other roles retain
   their label and acquire the accepted light foreground on hover. */
@media (hover: hover) {
    .site-page .button.ui-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { filter: brightness(var(--ui-control-hover-brightness)); }
    .site-page :is(.text-button.ui-text-button, .ui-inline-link, .ui-icon-button):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { color: var(--ui-secondary-text); }
}

/* New v1 pressed feedback. It does not imply a persistent selected state. */
.site-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active { filter: brightness(var(--ui-control-pressed-brightness)); }

/* Existing focus colour; shared buttons/text use 3px, compact edit/icons 2px. */
.site-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button):focus-visible {
    outline: var(--ui-control-focus-width) solid var(--ui-focus-color);
    outline-offset: var(--ui-control-focus-offset);
}

/* New v1 disabled/loading presentation. CSS never replaces semantics:
   native buttons use disabled; anchors need the activation guard in JS.
   aria-busy stays separately announced and preserves the original label. */
.site-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button):is(:disabled, [aria-disabled="true"]) {
    opacity: var(--ui-control-disabled-opacity);
    cursor: not-allowed;
    filter: none;
}
.site-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button)[aria-busy="true"] {
    opacity: 1;
    cursor: progress;
    filter: none;
}

/* Loading-capable controls keep this child in every state, including default.
   visibility reserves its geometry so revealing the spinner never moves text.
   Omit the child for actions that do not load, such as the live edit link. */
.site-page :is(.button.ui-button, .text-button.ui-text-button) > .ui-control-spinner {
    display: inline-block;
    flex: 0 0 1em;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    visibility: hidden;
}
.site-page :is(.button.ui-button, .text-button.ui-text-button)[aria-busy="true"] > .ui-control-spinner {
    visibility: visible;
    animation: ui-control-spin 800ms linear infinite;
}
/* Icon loading uses the same 24px glyph box, with the accessible button name
   retained by markup. The minimum 36/40/44px control geometry does not change. */
.site-page .ui-icon-button > .ui-control-spinner {
    grid-area: 1 / 1;
    display: block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    visibility: hidden;
}
.site-page .ui-icon-button[aria-busy="true"] > .ui-control-spinner {
    visibility: visible;
    animation: ui-control-spin 800ms linear infinite;
}
.site-page .ui-icon-button[aria-busy="true"] > svg { visibility: hidden; }
@keyframes ui-control-spin { to { transform: rotate(360deg); } }

/* Frozen samples use the same controls and state declarations. Only the UI Kit
   page can request them, so data attributes cannot restyle production pages. */
.ui-kit-page .button.ui-button[data-ui-preview-state="hover"]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { filter: brightness(var(--ui-control-hover-brightness)); }
.ui-kit-page :is(.text-button.ui-text-button, .ui-inline-link, .ui-icon-button)[data-ui-preview-state="hover"]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { color: var(--ui-secondary-text); }
.ui-kit-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button)[data-ui-preview-state="pressed"]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { filter: brightness(var(--ui-control-pressed-brightness)); }
.ui-kit-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button)[data-ui-preview-state="focus"] {
    outline: var(--ui-control-focus-width) solid var(--ui-focus-color);
    outline-offset: var(--ui-control-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    .site-page :is(.button.ui-button, .text-button.ui-text-button, .ui-inline-link, .ui-icon-button) { transition: none; }
    .site-page :is(.button.ui-button, .text-button.ui-text-button)[aria-busy="true"] > .ui-control-spinner { animation: none; }
    .site-page .ui-icon-button[aria-busy="true"] > .ui-control-spinner { animation: none; }
}