/*
 * Arc.Forms.Blazor — component styles.
 *
 * Consumes the Arc design tokens (--arc-bg-*, --arc-fg-*, --arc-border-*, --arc-accent,
 * --arc-danger, --arc-radius-*, --arc-space-*, --arc-font-*). When the host site doesn't ship
 * those tokens the rules fall back to neutral defaults via the cascade — components still
 * render readably, just without the Arc look.
 */

/* ---- Field wrapper ---- */
.arc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.arc-field:last-child {
    margin-bottom: 0;
}

/* ---- Label ---- */
.arc-label {
    display: block;
    font-family: var(--arc-font-sans, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--arc-fg-2, #b4b6bc);
    letter-spacing: -0.005em;
}

/* ---- Input / textarea / select ---- */
.arc-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--arc-font-sans, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--arc-fg-1, #f4f5f7);
    background: var(--arc-bg-1, #0f1012);
    border: 1px solid var(--arc-border-2, #2a2c31);
    border-radius: var(--arc-radius-1, 4px);
    /* Density tokens (from Arc.UI). Fallbacks keep Arc.Forms standalone-safe + match the prior literal. */
    padding: var(--arc-density-control-py, 10px) var(--arc-density-field-px, 12px);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.arc-input::placeholder {
    color: var(--arc-fg-3, #797c84);
}
.arc-input:hover {
    border-color: var(--arc-border-3, #3a3d43);
}
.arc-input:focus-visible {
    outline: none;
    border-color: var(--arc-border-focus, var(--arc-accent, #43f5a1));
    box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.18);
}

textarea.arc-input {
    resize: vertical;
    min-height: 84px;
}

select.arc-input {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--arc-fg-3, #797c84) 50%),
        linear-gradient(135deg, var(--arc-fg-3, #797c84) 50%, transparent 50%);
    background-position:
        right 14px center,
        right 9px center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}

/* ---- Invalid state ---- */
.arc-field-invalid .arc-input {
    border-color: var(--arc-danger, #f5636b);
}
.arc-field-invalid .arc-input:focus-visible {
    border-color: var(--arc-danger, #f5636b);
    box-shadow: 0 0 0 3px rgba(245, 99, 107, 0.20);
}
.arc-field-invalid .arc-label {
    color: var(--arc-danger, #f5636b);
}

/* ---- Error region ---- */
.arc-error {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--arc-font-sans, system-ui, sans-serif);
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--arc-danger, #f5636b);
}

/* ---- Checkbox ---- */
.arc-field-checkbox {
    flex-direction: column;
    gap: 4px;
}
.arc-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: var(--arc-font-sans, system-ui, sans-serif);
    font-size: 14px;
    color: var(--arc-fg-1, #f4f5f7);
}
.arc-checkbox-label .arc-label {
    /* When the label is inline with the checkbox, lift the default block treatment. */
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}
.arc-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--arc-border-3, #3a3d43);
    border-radius: 3px;
    background: var(--arc-bg-1, #0f1012);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.arc-checkbox:hover {
    border-color: var(--arc-accent, #43f5a1);
}
.arc-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.20);
}
.arc-checkbox:checked {
    background: var(--arc-accent, #43f5a1);
    border-color: var(--arc-accent, #43f5a1);
}
.arc-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--arc-fg-on-accent, #07120c);
    clip-path: polygon(14% 49%, 0 63%, 38% 100%, 100% 22%, 84% 8%, 38% 73%);
}