/*
 * Structural styles only: spacing, states and layout for the shared form primitives.
 * Everything visual is a custom property, so the final design system can restyle the forms
 * without touching a single component.
 */
:root {
    --wtl-space-1: 0.25rem;
    --wtl-space-2: 0.5rem;
    --wtl-space-3: 0.75rem;
    --wtl-space-4: 1rem;
    --wtl-space-6: 1.5rem;

    --wtl-radius: 6px;
    --wtl-border: 1px solid #d5d9e0;
    --wtl-border-focus: #2f5bff;

    --wtl-fg: #12151c;
    --wtl-fg-muted: #5b6472;
    --wtl-bg-input: #fff;

    --wtl-danger: #b3261e;
    --wtl-success: #1b6b3a;
    --wtl-warning: #8a5a00;
    --wtl-info: #1c4f8f;

    --wtl-btn-primary-bg: #12151c;
    --wtl-btn-primary-fg: #fff;
}

.wtl-form { display: flex; flex-direction: column; gap: var(--wtl-space-4); }
.wtl-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wtl-space-4); align-items: start; }

.wtl-field { display: flex; flex-direction: column; gap: var(--wtl-space-1); }
.wtl-field--inline { flex-direction: row; align-items: center; gap: var(--wtl-space-2); }
.wtl-field__label { font-weight: 600; font-size: 0.875rem; color: var(--wtl-fg); }
.wtl-field--inline .wtl-field__label { font-weight: 400; }
.wtl-field__required { color: var(--wtl-danger); margin-left: var(--wtl-space-1); }
.wtl-field__hint { margin: 0; font-size: 0.8125rem; color: var(--wtl-fg-muted); }
.wtl-field__error { font-size: 0.8125rem; color: var(--wtl-danger); }

.wtl-input {
    width: 100%;
    padding: var(--wtl-space-2) var(--wtl-space-3);
    border: var(--wtl-border);
    border-radius: var(--wtl-radius);
    background: var(--wtl-bg-input);
    color: var(--wtl-fg);
    font: inherit;
}
.wtl-input:focus-visible { outline: 2px solid var(--wtl-border-focus); outline-offset: 1px; }
.wtl-input--area { resize: vertical; min-height: 6rem; }
.wtl-input.invalid { border-color: var(--wtl-danger); }
.wtl-checkbox { width: 1rem; height: 1rem; }

.tools {
    display: flex; gap: var(--wtl-space-1);
    border: var(--wtl-border); border-bottom: 0;
    border-radius: var(--wtl-radius) var(--wtl-radius) 0 0;
    background: var(--wtl-bg-input); padding: var(--wtl-space-2);
}
.tool {
    min-width: 2rem; padding: var(--wtl-space-1) var(--wtl-space-2);
    border: var(--wtl-border); border-radius: var(--wtl-radius);
    background: #fff; color: var(--wtl-fg); font: inherit;
    cursor: pointer;
}
.tool:hover { background: var(--wtl-bg-input); border-color: var(--wtl-border-focus); }

.wtl-actions { display: flex; gap: var(--wtl-space-3); align-items: center; margin-top: var(--wtl-space-2); }
.wtl-btn {
    display: inline-flex; align-items: center; gap: var(--wtl-space-2);
    padding: var(--wtl-space-2) var(--wtl-space-4);
    border: var(--wtl-border); border-radius: var(--wtl-radius);
    font: inherit; cursor: pointer; background: transparent; color: var(--wtl-fg);
}
.wtl-btn--primary { background: var(--wtl-btn-primary-bg); color: var(--wtl-btn-primary-fg); border-color: transparent; }
.wtl-btn--ghost { background: transparent; }
.wtl-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.wtl-spinner {
    width: 0.875rem; height: 0.875rem; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: wtl-spin 0.7s linear infinite;
}
@keyframes wtl-spin { to { transform: rotate(360deg); } }

.wtl-msg {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wtl-space-3);
    padding: var(--wtl-space-3) var(--wtl-space-4);
    border-radius: var(--wtl-radius); border-left: 4px solid currentColor;
    font-size: 0.9375rem;
}
.wtl-msg--info { color: var(--wtl-info); background: color-mix(in srgb, var(--wtl-info) 8%, transparent); }
.wtl-msg--success { color: var(--wtl-success); background: color-mix(in srgb, var(--wtl-success) 8%, transparent); }
.wtl-msg--warning { color: var(--wtl-warning); background: color-mix(in srgb, var(--wtl-warning) 8%, transparent); }
.wtl-msg--error { color: var(--wtl-danger); background: color-mix(in srgb, var(--wtl-danger) 8%, transparent); }
.wtl-msg__close { border: 0; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }

/* Honeypot: reachable by bots parsing the DOM, invisible and untabbable for people. */
.wtl-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }