/* SlugPathField: chips inside the host's own box.

   The field wraps the host's box class, haya-input in the dashboard or
   black-form-input in the builder, so it keeps that box's border, padding and
   surface. This sheet only lays the chips and the real input out inside it, and
   moves the box's focus look to :focus-within, since the focused element is
   now the inner input and not the box. Colours come from currentColor and
   color-mix, so one sheet suits the light dashboard and the dark builder. */

.slug-path-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    cursor: text;
    direction: ltr;
    text-align: left;
}

.slug-path-field.haya-input:focus-within {
    border-color: var(--haya-brand);
}

.slug-path-field.black-form-input:focus-within {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.slug-path-field--invalid.haya-input,
.slug-path-field--invalid.haya-input:focus-within {
    border-color: var(--haya-danger);
}

.slug-path-field--invalid.black-form-input,
.slug-path-field--invalid.black-form-input:focus-within {
    border-color: #f87171;
}

.slug-path-field--locked {
    cursor: default;
    opacity: 0.7;
}

.slug-path-field__prefix,
.slug-path-field__separator {
    flex: none;
    opacity: 0.55;
    font-family: var(--haya-font-family-mono, ui-monospace, monospace);
    user-select: none;
}

.slug-path-field__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: none;
    max-inline-size: 100%;
    padding-block: 0;
    padding-inline: 0.5rem 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-family: var(--haya-font-family-mono, ui-monospace, monospace);
    line-height: 1.6;
    unicode-bidi: isolate;
}

.slug-path-field--locked .slug-path-field__chip {
    padding-inline-end: 0.5rem;
}

.slug-path-field__chip--invalid {
    background: color-mix(in srgb, #dc2626 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc2626 55%, transparent);
}

.slug-path-field__chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slug-path-field__chip-remove {
    display: inline-grid;
    place-items: center;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    opacity: 0.6;
    cursor: pointer;
}

.slug-path-field__chip-remove:hover,
.slug-path-field__chip-remove:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 14%, transparent);
    outline: none;
}

/* The real input: the box around it is the field, so the input itself has no
   border, padding or background of its own. */
.slug-path-field__input {
    flex: 1 1 6ch;
    min-inline-size: 6ch;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    direction: ltr;
    text-align: left;
}

.slug-path-field__input:disabled {
    cursor: default;
}

/* Advice under the box: the path still saves, so it is not the danger colour. */
.slug-path-field__hint {
    display: block;
    margin-block-start: 0.375rem;
    color: var(--haya-warning, #b45309);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.black-form-input + .slug-path-field__hint,
.form-group .slug-path-field__hint {
    color: #fbbf24;
}

/* Information, not advice or a refusal: what the save will do besides. */
.slug-path-field__notice {
    display: block;
    margin-block-start: 0.375rem;
    color: var(--haya-info, #1d4ed8);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.form-group .slug-path-field__notice {
    color: #93c5fd;
}

/* The full address a visitor types, with its copy button. */
.slug-path-field__address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-block-start: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* In the builder's dark form the row inherited the dialog's default dark text
   and drew black on the black surface (user report, 2026-10-20) — the same
   pairing the hint and notice above already carry. */
.black-form-input ~ .slug-path-field__address,
.form-group .slug-path-field__address {
    color: rgba(255, 255, 255, 0.85);
}

.slug-path-field__address-label {
    opacity: 0.7;
}

.slug-path-field__address-value {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-family: var(--haya-font-family-mono, ui-monospace, monospace);
}

/* A real small button: icon and word, its own padding and corner. Scoped
   through the row so the builder's button reset (padding: 0) cannot strip it
   back to a 21px word, which is what the dark dialog showed. */
.slug-path-field__address .slug-path-field__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex: none;
    block-size: 1.5rem;
    padding: 0 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.slug-path-field__address .slug-path-field__copy:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.slug-path-field__address .slug-path-field__copy:focus-visible {
    outline: 2px solid var(--haya-brand, #71c9ff);
    outline-offset: 2px;
}

/* Copied: green for the moment the word says so. */
.slug-path-field__address .slug-path-field__copy.is-copied {
    color: var(--haya-success, #15803d);
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.form-group .slug-path-field__address .slug-path-field__copy.is-copied {
    color: #34d399;
}

/* Under the box, in the danger colour. The admin field's own error line
   (haya-field__error) is for the server's refusal; this one is the field's own. */
.slug-path-field__error {
    display: block;
    margin-block-start: 0.375rem;
    color: var(--haya-danger, #f87171);
    font-size: 0.8125rem;
    line-height: 1.5;
}