/*
 * The v1 in the filename is the cache contract: change the contents, bump to v2.
 * The custom properties on .ib are the per-yard theming surface.
 */

.ib {
    --ib-page: hsl(240 5% 96%);
    --ib-surface: hsl(0 0% 100%);
    --ib-fg: hsl(240 10% 3.9%);
    --ib-muted-fg: hsl(240 4% 46%);
    --ib-sunken: hsl(240 5% 97%);
    --ib-border: hsl(240 6% 88%);
    --ib-border-strong: hsl(240 5% 78%);
    --ib-primary: hsl(223 70% 40%);
    --ib-primary-strong: hsl(223 70% 33%);
    --ib-primary-tint: hsl(223 70% 97%);
    --ib-primary-fg: hsl(0 0% 100%);
    --ib-danger: hsl(0 72% 42%);
    --ib-danger-tint: hsl(0 80% 98%);

    --ib-radius-card: 0.875rem;
    --ib-radius-control: 0.625rem;
    --ib-radius-pill: 999px;

    --ib-shadow-card: 0 1px 2px hsl(240 10% 4% / 0.04), 0 8px 24px -8px hsl(240 10% 4% / 0.12);
    --ib-shadow-control: inset 0 1px 2px hsl(240 10% 4% / 0.04);
    --ib-shadow-button: 0 1px 2px hsl(223 70% 20% / 0.24);

    /* vw here is the iframe's width, not the phone's, so type tracks the space
       the yard actually gave us. */
    --ib-text-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
    --ib-text-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
    --ib-text-lg: clamp(1.0625rem, 1.03rem + 0.2vw, 1.125rem);
    --ib-text-question: clamp(1.5rem, 1.3rem + 1vw, 1.9375rem);

    /* Inherit nothing, so the form survives being rendered inline on a host page
       one day rather than only inside the frame. */
    all: initial;

    display: block;
    box-sizing: border-box;
    max-width: 33rem;
    margin: 0 auto;
    padding: clamp(1.375rem, 1rem + 2.5vw, 2rem);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--ib-text-base);
    line-height: 1.5;
    color: var(--ib-fg);
    text-align: left;
    background-color: var(--ib-surface);
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius-card);
    box-shadow: var(--ib-shadow-card);
    -webkit-text-size-adjust: 100%;
}

.ib *,
.ib *::before,
.ib *::after {
    box-sizing: inherit;
}

.ib-question {
    margin: 0 0 1.75rem;
    font-size: var(--ib-text-question);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}

.ib-lede {
    margin: -1rem 0 1.75rem;
    color: var(--ib-muted-fg);
}

.ib-field {
    margin: 0 0 1.75rem;
}

.ib-label {
    display: block;
    margin: 0 0 0.5rem;
    font-size: var(--ib-text-sm);
    font-weight: 600;
    letter-spacing: 0.005em;
}

.ib-label span {
    font-weight: 400;
    color: var(--ib-muted-fg);
}

.ib-input {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.6875rem 0.9375rem;
    font: inherit;
    font-size: var(--ib-text-lg);
    color: var(--ib-fg);
    background-color: var(--ib-surface);
    border: 1px solid var(--ib-border-strong);
    border-radius: var(--ib-radius-control);
    box-shadow: var(--ib-shadow-control);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ib-input:hover {
    border-color: var(--ib-muted-fg);
}

.ib-input::placeholder {
    color: var(--ib-muted-fg);
}

.ib-input-short {
    max-width: 10.5rem;
}

.ib-hint {
    margin: 0.5rem 0 0;
    font-size: var(--ib-text-sm);
    line-height: 1.45;
    color: var(--ib-muted-fg);
}

.ib-choices {
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

.ib-choices legend {
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: var(--ib-text-sm);
    font-weight: 600;
}

.ib-choice {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3.5rem;
    margin: 0 0 0.625rem;
    padding: 0.75rem 1rem;
    font-size: var(--ib-text-lg);
    background-color: var(--ib-surface);
    border: 1px solid var(--ib-border-strong);
    border-radius: var(--ib-radius-control);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

/* embed-vehicle.v1.js: the 80 ms covers the round trip for the next list. */
.ib-closing .ib-choice {
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: opacity 0.08s ease-in, transform 0.08s ease-in;
}

.ib-swapped .ib-choice {
    animation: ib-open 0.08s ease-out;
}

@keyframes ib-open {
    from {
        opacity: 0;
        transform: translateY(0.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ib-closing .ib-choice,
    .ib-swapped .ib-choice {
        transition: none;
        animation: none;
    }
}

/* Focused by the script to announce the question; not a control. */
.ib-question:focus {
    outline: none;
}

.ib-choice:hover {
    border-color: var(--ib-muted-fg);
    background-color: var(--ib-sunken);
}

.ib-choice input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--ib-primary);
}

/* A column, so an option can carry a line of the yard's own explanation under its
   label. The seed set has none; the admin can add one per answer. */
.ib-choice-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.ib-choice-hint {
    font-size: var(--ib-text-sm);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ib-muted-fg);
}

.ib-choice:has(input:checked) {
    font-weight: 600;
    background-color: var(--ib-primary-tint);
    border-color: var(--ib-primary);
    box-shadow: inset 0 0 0 1px var(--ib-primary);
}

.ib-submit {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.875rem 1.5rem;
    font: inherit;
    font-size: var(--ib-text-lg);
    font-weight: 600;
    color: var(--ib-primary-fg);
    background-color: var(--ib-primary);
    border: 0;
    border-radius: var(--ib-radius-pill);
    box-shadow: var(--ib-shadow-button);
    cursor: pointer;
    transition: background-color 0.15s;
}

.ib-submit:hover {
    background-color: var(--ib-primary-strong);
}

.ib-submit:active {
    background-color: var(--ib-primary-strong);
    box-shadow: none;
}

.ib-secondary {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-size: var(--ib-text-base);
    font-weight: 500;
    color: var(--ib-muted-fg);
    background: none;
    border: 0;
    cursor: pointer;
}

.ib-secondary:hover {
    color: var(--ib-fg);
    text-decoration: underline;
}

.ib-textarea {
    min-height: 0;
    resize: vertical;
    font-size: var(--ib-text-base);
    line-height: 1.5;
}

.ib-expiry {
    margin: 0 0 1.75rem;
    font-size: var(--ib-text-sm);
    line-height: 1.45;
    color: var(--ib-muted-fg);
}

.ib-summary {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    font-size: var(--ib-text-sm);
    font-weight: 500;
    color: var(--ib-danger);
    background-color: var(--ib-danger-tint);
    border: 1px solid currentColor;
    border-radius: var(--ib-radius-control);
}

.ib-error {
    display: block;
    margin: 0.5rem 0 0;
    font-size: var(--ib-text-sm);
    font-weight: 500;
    color: var(--ib-danger);
}

.ib-error:empty {
    display: none;
}

.ib :where(input, select, textarea, button):focus-visible {
    outline: 2px solid var(--ib-primary);
    outline-offset: 2px;
}

.ib-input:focus-visible {
    border-color: var(--ib-primary);
    outline-offset: 1px;
}

.ib-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}