/**
 * UTM builder ([utm_builder]): preset select, address and parameter fields,
 * live result. Colours come from the surrounding palette, so the tool works
 * in the article column and in any colour section.
 *
 * Structure (rendered by utm-builder.php):
 *   .utm-builder
 *     form.utm-builder__form
 *       .utm-builder__field > label.utm-builder__label + span.utm-builder__select > select.utm-builder__preset
 *       .utm-builder__link                      (hidden when an ad preset is chosen)
 *         .utm-builder__field (address)
 *         .utm-builder__fields > .utm-builder__field × 4
 *           label (code.utm-builder__param + span.utm-builder__label-text), input.utm-builder__input,
 *           p.utm-builder__normalized
 *         details.utm-builder__extra > .utm-builder__fields (utm_id, utm_term)
 *         .utm-builder__panel.utm-builder__result
 *           .utm-builder__output (span.utm-builder__sep / __key / __value)
 *           .utm-builder__actions (button.utm-builder__copy, a.utm-builder__test, span.utm-builder__status)
 *           ul.utm-builder__notes > li.utm-builder__note--warn | --info
 *       .utm-builder__panel.utm-builder__template[data-template] × 2
 *     .utm-builder__upsell (hidden until the link is taken: copy button, click on the
 *       link, or a manual copy; absent with nosto="ei")
 *       p.utm-builder__upsell-title, p.utm-builder__upsell-text, a.utm-builder__upsell-link
 *     p.utm-builder__nojs, p.utm-builder__privacy
 *
 * State: .is-ready on the root once the script runs (hides the no-JS note);
 *   .is-ready on .utm-builder__link-output when it holds a tagged link (click selects it whole).
 *
 * Tuning: --utm-builder-padding (24px, 32px from 768px), --utm-builder-radius (12px),
 *   --utm-builder-surface (fields and panels; --bg-clr, white on the beige palette)
 *
 * Inside .article-highlight the builder drops its own box: the highlight is the box.
 */

.utm-builder {
    --utm-builder-padding: 24px;
    --utm-builder-radius: 12px;
    --utm-builder-surface: var(--bg-clr);
    margin: 2em 0;
    padding: var(--utm-builder-padding);
    border-radius: var(--utm-builder-radius);
    background-color: color-mix(in srgb, currentColor 5%, transparent);
}

/* Beige palette: fields and panels stay white so they lift off the beige. */
.wrapper-alternate-color .utm-builder {
    --utm-builder-surface: var(--body-bg-clr);
}

/* Inside an article highlight the highlight is the box: no box in a box. */
.article-highlight .utm-builder {
    margin: 1.5em 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

.utm-builder [hidden] {
    display: none !important;
}

/* Explicit: inside <details> Chrome's content slot breaks the theme's
   inherited border-box, and the extra inputs would overflow. */
.utm-builder *,
.utm-builder *::before,
.utm-builder *::after {
    box-sizing: border-box;
}

.utm-builder .utm-builder__form {
    margin: 0;
}

/* ---------- Fields ---------- */

.utm-builder .utm-builder__field {
    margin: 0 0 20px;
}

/* minmax(0, 1fr): an input's intrinsic width must not widen the column. */
.utm-builder .utm-builder__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.utm-builder .utm-builder__fields .utm-builder__field {
    margin: 0;
}

.utm-builder .utm-builder__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Parameter name and description on their own lines, so fields side by
   side stay aligned however the description wraps. */
.utm-builder .utm-builder__param {
    display: block;
    padding: 0;
    background: none;
    color: var(--heading-clr);
    font-size: 0.95em;
    font-weight: 700;
}

.utm-builder .utm-builder__label-text {
    display: block;
    font-weight: 400;
    color: color-mix(in srgb, currentColor 75%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 16px keeps iOS from zooming into the field. */
.utm-builder .utm-builder__input {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 6px;
    background-color: var(--utm-builder-surface);
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
}

.utm-builder .utm-builder__input::placeholder {
    color: color-mix(in srgb, currentColor 45%, transparent);
    opacity: 1;
}

.utm-builder .utm-builder__input:focus {
    border-color: var(--accent-clr);
    outline: 2px solid var(--accent-clr);
    outline-offset: 0;
}

/* Own chevron instead of the native arrow, which sits against the edge.
   Drawn with borders in currentColor, so it follows the palette. */
.utm-builder .utm-builder__select {
    position: relative;
    display: block;
}

.utm-builder .utm-builder__select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.utm-builder .utm-builder__preset {
    padding-right: 48px;
    appearance: none;
    cursor: pointer;
}

.utm-builder .utm-builder__normalized {
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: color-mix(in srgb, currentColor 75%, transparent);
    overflow-wrap: anywhere;
}

.utm-builder .utm-builder__normalized code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: 1em;
    font-weight: 600;
}

.utm-builder .utm-builder__extra {
    margin: 0 0 20px;
}

.utm-builder .utm-builder__extra summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.utm-builder .utm-builder__extra[open] summary {
    margin-bottom: 16px;
}

.utm-builder .utm-builder__extra .utm-builder__fields {
    margin-bottom: 0;
}

/* ---------- Result and template panels ---------- */

.utm-builder .utm-builder__panel {
    padding: 20px;
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 8px;
    background-color: var(--utm-builder-surface);
}

.utm-builder .utm-builder__panel-label {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-clr);
}

.utm-builder .utm-builder__where,
.utm-builder .utm-builder__help {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.utm-builder .utm-builder__help {
    margin: 14px 0 0;
    color: color-mix(in srgb, currentColor 75%, transparent);
}

.utm-builder .utm-builder__output {
    min-height: 3em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* One click selects the whole link or template, for those who copy by hand. */
.utm-builder .utm-builder__link-output.is-ready,
.utm-builder .utm-builder__template .utm-builder__output {
    -webkit-user-select: all;
    user-select: all;
    cursor: text;
}

.utm-builder .utm-builder__output code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: 1em;
}

.utm-builder .utm-builder__placeholder {
    font-family: var(--main-font, inherit);
    color: color-mix(in srgb, currentColor 55%, transparent);
}

.utm-builder .utm-builder__sep {
    color: var(--accent-clr);
    font-weight: 700;
}

.utm-builder .utm-builder__key {
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.utm-builder .utm-builder__value {
    color: var(--heading-clr);
    font-weight: 700;
}

.utm-builder .utm-builder__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 16px;
}

.utm-builder .utm-builder__copy {
    padding: var(--button-padding, 12px 18px);
    border: 0;
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
}

.utm-builder .utm-builder__copy:hover,
.utm-builder .utm-builder__copy:focus-visible {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

.utm-builder .utm-builder__copy:disabled {
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    opacity: 0.45;
    cursor: not-allowed;
}

.utm-builder .utm-builder__test {
    font-weight: 600;
}

.utm-builder .utm-builder__status {
    font-size: 0.9rem;
    font-weight: 600;
}

.utm-builder .utm-builder__notes {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.utm-builder .utm-builder__notes:empty {
    display: none;
}

.utm-builder .utm-builder__note {
    position: relative;
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.utm-builder .utm-builder__note:last-child {
    margin-bottom: 0;
}

.utm-builder .utm-builder__note::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: color-mix(in srgb, currentColor 35%, transparent);
}

.utm-builder .utm-builder__note--warn::before {
    background-color: var(--accent-clr);
}

/* ---------- Note after the first copy ---------- */

.utm-builder .utm-builder__upsell {
    margin-top: 16px;
    padding: 20px 24px;
    border-left: 4px solid var(--accent-clr);
    border-radius: 0 8px 8px 0;
    background-color: var(--utm-builder-surface);
    animation: utm-builder-reveal 0.4s var(--transition-timing-function, ease) both;
}

.utm-builder .utm-builder__upsell-title {
    margin: 0 0 6px;
    color: var(--heading-clr);
    font-weight: 700;
    line-height: 1.4;
}

.utm-builder .utm-builder__upsell-text {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.utm-builder .utm-builder__upsell-link {
    font-weight: 600;
}

.utm-builder .utm-builder__upsell-link::after {
    content: " \2192";
}

@keyframes utm-builder-reveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .utm-builder .utm-builder__upsell {
        animation: none;
    }
}

/* ---------- Footnotes ---------- */

.utm-builder .utm-builder__nojs,
.utm-builder .utm-builder__privacy {
    margin: 16px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.utm-builder.is-ready .utm-builder__nojs {
    display: none;
}

@media only screen and (min-width: 768px) {
    .utm-builder {
        --utm-builder-padding: 32px;
    }

    .utm-builder .utm-builder__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .utm-builder .utm-builder__panel {
        padding: 24px;
    }
}