/* Xuro shell control kit (UI audit H2, 2026-09-30).

   ONE button, ONE field family, ONE keyboard focus ring for the whole shell,
   so a control looks and behaves the same on every page. Pages add layout
   (margins, widths, alignment) around these classes; they no longer restyle
   the control itself. Imported by index.css right after tokens.css.

   Buttons   .button                 neutral (the default)
             .button-primary         accent fill, white text (the one primary action of a view)
             .button-ghost           no fill, no border (back links, quiet actions)
             .button-danger          true-red fill, white text: irreversible deletes ONLY
             .button-sm              32px tall
             .button-selected        the selected state of a segmented/pagination button
   Fields    .field-input .field-select .field-textarea

   Accent FILLS (--color-accent-fill*) may only be painted from this file:
   uiGuards.verify.js fails on a text-on-accent rule anywhere else, and on any
   hard-coded colour outside tokens.css. */

/* One keyboard focus ring. Mouse clicks never draw it (focus-visible only). */
:focus-visible {
    /* An outline, not a box-shadow: component rules that set box-shadow (pdf
       pins, selected depth cards) cannot erase it. uiGuards fails on any rule
       that switches the outline off without drawing the ring. */
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: 40px;
    padding: 0 var(--space-4);

    background-color: var(--color-bg-surface-raised);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);

    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
}

.button:hover:not(:disabled) {
    background-color: var(--color-bg-surface-hover);
    border-color: var(--color-border-strong);
}

.button:active:not(:disabled) {
    transform: scale(0.98);
}

.button:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.button-primary {
    background-color: var(--color-accent-fill);
    border-color: var(--color-accent-fill);
    color: var(--color-accent-contrast);
    font-weight: var(--weight-semibold);
}

.button-primary:hover:not(:disabled) {
    background-color: var(--color-accent-fill-hover);
    border-color: var(--color-accent-fill-hover);
}

.button-primary:active:not(:disabled) {
    background-color: var(--color-accent-fill-press);
    border-color: var(--color-accent-fill-press);
}

.button-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
}

.button-ghost:hover:not(:disabled) {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-primary);
}

.button-danger {
    background-color: var(--color-danger-fill);
    border-color: var(--color-danger-fill);
    color: var(--color-danger-contrast);
    font-weight: var(--weight-semibold);
}

.button-danger:hover:not(:disabled) {
    background-color: var(--color-danger-fill-hover);
    border-color: var(--color-danger-fill-hover);
}

.button-danger:active:not(:disabled) {
    background-color: var(--color-danger-fill-press);
    border-color: var(--color-danger-fill-press);
}

.button-sm {
    min-height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

.button-selected,
.button-selected:hover:not(:disabled) {
    background-color: var(--color-accent-fill);
    border-color: var(--color-accent-fill);
    color: var(--color-accent-contrast);
    font-weight: var(--weight-semibold);
    cursor: default;
}

/* Fields: inset ground, default border, the same 40px as a button. */
.field-input,
.field-select,
.field-textarea {
    width: 100%;
    min-width: 0;

    background-color: var(--color-bg-inset);
    color: var(--color-text-primary);

    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);

    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.3;
}

.field-input,
.field-select {
    min-height: 40px;
    padding: 0 var(--space-3);
}

.field-textarea {
    padding: var(--space-2) var(--space-3);
    resize: vertical;
}

.field-input::placeholder,
.field-textarea::placeholder {
    color: var(--color-text-muted);
}

.field-input:hover:not(:disabled),
.field-select:hover:not(:disabled),
.field-textarea:hover:not(:disabled) {
    border-color: var(--color-border-strong);
}

.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* The chevron is two currentColor gradients, so it follows the text colour in
   both themes with no colour literal and no data URI. */
.field-select {
    appearance: none;
    padding-right: 32px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* A small filled accent tag (e.g. "Recommended"): the kit's other accent fill. */
/* Doubled class: it must beat a page tag rule that sets its own plain ground. */
.chip-accent.chip-accent {
    background-color: var(--color-accent-fill);
    color: var(--color-accent-contrast);
}

/* Icons (components/Icon.tsx): sit on the text baseline and never shrink in a flex row. */
.icon {
    flex-shrink: 0;
    vertical-align: -0.15em;
}