:root {
    color-scheme: light;
    --bg: #e6ecf0;
    --surface: #ffffff;
    --surface-strong: #f5f8fa;
    --text: #14171a;
    --muted: #657786;
    --line: #e1e8ed;
    --line-strong: #ccd6dd;
    --accent: #1da1f2;
    --accent-strong: #0c85d0;
    --accent-soft: #e8f5fe;
    --accent-faint: #f5fbff;
    --shadow: 0 1px 0 rgb(20 23 26 / 6%), 0 12px 28px rgb(101 119 134 / 14%);
    --radius: 8px;
    --radius-sm: 5px;
    --tap: 2.875rem;
    --action-bar: calc(var(--tap) + (var(--space-2) * 2));
    --space-1: 0.375rem;
    --space-2: 0.625rem;
    --space-3: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-block-size: 100%;
    background: var(--bg);
    font-family: var(--font);
    line-height: 1.5;
    color: var(--text);
}

body {
    min-block-size: 100%;
    margin: 0;
}

button,
input,
select {
    font: inherit;
}

button,
label,
select,
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

.wrap {
    inline-size: min(100% - 2rem, 58rem);
    margin-inline: auto;
}

main.wrap {
    container: builder / inline-size;
}

.site-header {
    padding-block: var(--space-4) var(--space-7);
    background: var(--surface);
    border-block-end: 1px solid var(--line);

    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-block-end: var(--space-6);
        color: var(--accent);
        font-size: 1.15rem;
        font-weight: 800;
        text-decoration: none;

        span {
            display: grid;
            place-items: center;
            inline-size: 2.25rem;
            block-size: 2.25rem;
            color: #ffffff;
            background: var(--accent);
            border-radius: 999px;
            font-family: Georgia, serif;
            font-size: 1.5rem;
            font-style: italic;
            line-height: 1;
        }
    }

    .eyebrow {
        margin: 0 0 var(--space-1);
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 750;
        text-transform: uppercase;
    }

    h1 {
        margin: 0;
        font-size: clamp(2rem, 12vw, 4rem);
        line-height: 1;
        letter-spacing: 0;
    }

    .lede {
        max-inline-size: 34rem;
        margin: var(--space-3) 0 0;
        color: var(--muted);
        font-size: 1.0625rem;
    }
}

.search-builder {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5) max(calc(var(--space-7) + var(--action-bar)), env(safe-area-inset-bottom));
}

.form-section,
.query-panel {
    --panel-padding: var(--space-4);
    display: grid;
    gap: var(--space-4);
    padding: var(--panel-padding);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-section {
    h2 {
        margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0;
        padding: 0.8rem var(--panel-padding);
        color: var(--text);
        background: var(--surface-strong);
        border-block-end: 1px solid var(--line);
        border-start-start-radius: var(--radius);
        border-start-end-radius: var(--radius);
        font-size: 1rem;
        line-height: 1.2;
    }
}

.field,
.field-pair {
    display: grid;
    gap: var(--space-2);
}

.field,
.field-pair>* {
    min-inline-size: 0;
}

.field-pair {
    grid-template-columns: minmax(0, 1fr);
}

.field {
    label {
        color: var(--muted);
        font-size: 0.875rem;
        font-weight: 700;
    }
}

input:not([type="checkbox"], [type="radio"]),
select {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--tap);
    padding: 0.75rem 0.875rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgb(20 23 26 / 4%);

    &::placeholder {
        color: rgb(91 107 115 / 72%);
    }

    &:focus {
        border-color: var(--accent);
        outline: 3px solid rgb(29 161 242 / 20%);
        outline-offset: 1px;
    }
}

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) 50%,
        calc(100% - 0.8rem) 50%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-inline-end: 2.25rem;
}

.prefix-control {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    min-block-size: var(--tap);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    overflow: clip;

    span {
        display: grid;
        place-items: center;
        align-self: stretch;
        min-inline-size: 2.5rem;
        color: var(--muted);
        background: var(--surface-strong);
        border-inline-end: 1px solid var(--line);
        font-weight: 800;
    }

    input {
        border: 0;
        border-radius: 0;

        &:focus {
            outline-offset: -3px;
        }
    }

    &:focus-within {
        border-color: var(--accent);
    }
}

.choice-group {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;

    legend {
        margin-block-end: var(--space-2);
        font-size: 0.9375rem;
        font-weight: 700;
    }

    label {
        min-block-size: 2.5rem;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.625rem 0.75rem;
        background: var(--accent-faint);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
    }
}

.switch-list {
    display: grid;
    gap: var(--space-2);

    label {
        min-block-size: 2.5rem;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--text);
        font-weight: 650;
    }
}

input[type="checkbox"],
input[type="radio"] {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    accent-color: var(--accent);
}

.query-panel {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    gap: var(--space-2);
    padding-block: var(--space-2);
    border-color: var(--line-strong);
    box-shadow: 0 8px 18px rgb(101 119 134 / 16%);

    h2 {
        margin: 0;
        color: var(--muted);
        font-size: 0.75rem;
        line-height: 1;
        text-transform: uppercase;
    }

    output {
        display: -webkit-box;
        max-block-size: 3.5rem;
        padding: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: var(--text);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.8125rem;
        line-height: 1.35;

        &[data-empty="true"] {
            color: var(--muted);
            font-family: var(--font);
        }
    }
}

.actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.42fr 1fr;
    gap: var(--space-2);
    padding-block: var(--space-2);
    background: linear-gradient(transparent, var(--bg) 28%);
}

button {
    min-block-size: var(--tap);
    padding: 0.75rem 1rem;
    color: #ffffff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 800;

    &:focus {
        outline: 3px solid var(--accent-soft);
        outline-offset: 2px;
    }

    &:active {
        transform: translateY(1px);
    }

    &.secondary {
        color: var(--accent);
        background: var(--surface);
    }
}

@container builder (min-width: 42rem) {
    .search-builder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .form-section,
    .query-panel {
        --panel-padding: var(--space-5);
    }

    .field-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .query-panel,
    .actions {
        grid-column: 1 / -1;
    }

    .actions {
        justify-self: end;
        inline-size: min(100%, 26rem);
    }
}

@container builder (min-width: 56rem) {
    .search-builder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 18rem;
    }

    .query-panel {
        grid-column: 1 / -1;
        grid-row: 1;
        inset-block-start: var(--space-4);
    }

    .actions {
        grid-column: 3;
        grid-row: 3;
        position: static;
        inline-size: 100%;
        background: transparent;
    }
}

@media (prefers-reduced-motion: no-preference) {
    button {
        transition: background-color 160ms ease, border-color 160ms ease, transform 80ms ease;

        &:hover {
            background: var(--accent-strong);
            border-color: var(--accent-strong);
        }

        &.secondary:hover {
            color: #ffffff;
        }
    }
}