/*
 * The release notice: a tab running an older build is offered a reload.
 *
 * Lived in templates/_version_notify.html.twig as a <style> block, where stylelint and
 * the token ban could not see it. Same rules as every other stylesheet now: colours
 * come from tokens.css, and the class names are namespaced (`appbuild*`) because this
 * chrome renders on top of pages with their own cascade and must not lean on it.
 *
 * The markup is built by assets/boot/versionNotify.js. Hover, active and focus-visible
 * are real states here rather than inline styles, which is why the CSS is a file and
 * not a string in JavaScript.
 */
/*
 * Release notice. Navy ground from the admin chrome (public/css/admin-shell.css)
 * lifted by a vertical gradient, with a 2px blue-to-green hairline across the
 * top edge - the app's two accents, used as a seam rather than as a fill, so
 * the thing reads as part of the product and not as a browser alert.
 *
 * All of it lives here rather than in inline styles so hover / active /
 * focus-visible are real states. Class names are namespaced; nothing here
 * leans on the app's own cascade.
 */
.appbuild {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483000;
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: min(92vw, 390px);
    padding: 11px 11px 11px 14px;
    border: 1px solid var(--color-admin-icon-line-hover);
    border-radius: 12px;
    background:
        linear-gradient(90deg, var(--color-link-bright) 0%, var(--color-success) 100%) top left / 100% 2px no-repeat,
        linear-gradient(180deg, var(--color-release-ground) 0%, var(--color-slate-900) 78%);
    box-shadow: 0 12px 30px rgba(8, 15, 32, .38), inset 0 1px 0 rgba(148, 163, 184, .10);
    color: var(--color-release-ink);
    font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Admin: the same object stretched into a seam above the page. */
.appbuild--banner {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    max-width: none;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 0 var(--color-admin-edge), 0 8px 20px rgba(8, 15, 32, .22);
}

/* Forced: amber, and the seam turns to a warning gradient. Never mistakable
   for the ordinary notice. */
.appbuild--forced {
    border-color: var(--color-warning-edge);
    background:
        linear-gradient(90deg, var(--color-warning) 0%, var(--color-danger-bright) 100%) top left / 100% 2px no-repeat,
        linear-gradient(180deg, var(--color-warning-ground) 0%, var(--color-warning-ground-deep) 78%);
    color: var(--color-warning-fill);
}

.appbuild__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}

.appbuild--forced .appbuild__dot {
    background: var(--color-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.appbuild__text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    cursor: default;
}

.appbuild--banner .appbuild__text { flex: 0 1 auto; }

.appbuild__go {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--color-link-bright) 0%, var(--color-link-strong) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(37, 99, 235, .34);
    color: var(--color-surface);
    /* Split rather than the `font:` shorthand: `inherit` is not a valid family
       inside it, which is a thing stylelint could not tell us while this CSS lived
       in a Twig <style> block. */
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .13s ease, box-shadow .13s ease, transform .06s ease;
}

.appbuild__go:hover {
    background: linear-gradient(180deg, var(--color-link-lift) 0%, var(--color-link-bright) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 4px 12px rgba(37, 99, 235, .42);
}

.appbuild__go:active { transform: translateY(1px); }

.appbuild--forced .appbuild__go {
    background: linear-gradient(180deg, var(--color-warning-lift) 0%, var(--color-warning) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(245, 158, 11, .32);
    color: var(--color-warning-ink-deep);
}

.appbuild--forced .appbuild__go:hover {
    background: linear-gradient(180deg, var(--color-warning-lift-bright) 0%, var(--color-warning-lift) 100%);
}

/*
 * Dismiss. A bare glyph reads as text, not as a control: this is a 26px
 * rounded square that already carries a faint surface at rest, so the target
 * is visible before the pointer arrives, and lifts clearly on hover.
 */
.appbuild__dismiss {
    display: grid;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 8px;
    background: rgba(148, 163, 184, .07);
    color: var(--color-release-ink-dim);
    font-family: inherit;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    place-items: center;
    transition: background .13s ease, border-color .13s ease, color .13s ease;
}

.appbuild__dismiss:hover {
    border-color: rgba(226, 232, 240, .34);
    background: rgba(226, 232, 240, .18);
    color: var(--color-surface);
}

.appbuild__dismiss:active {
    border-color: rgba(226, 232, 240, .4);
    background: rgba(226, 232, 240, .26);
}

.appbuild--forced .appbuild__dismiss {
    border-color: rgba(253, 230, 138, .22);
    background: rgba(253, 230, 138, .08);
    color: var(--color-warning-ink-dim);
}

.appbuild--forced .appbuild__dismiss:hover {
    border-color: rgba(253, 230, 138, .42);
    background: rgba(253, 230, 138, .2);
    color: var(--color-warning-ink-faint);
}

.appbuild__go:focus-visible,
.appbuild__dismiss:focus-visible {
    outline: 2px solid var(--color-selection-border);
    outline-offset: 2px;
}

.appbuild--forced .appbuild__go:focus-visible,
.appbuild--forced .appbuild__dismiss:focus-visible { outline-color: var(--color-warning-lift-bright); }

@media (prefers-reduced-motion: reduce) {
    .appbuild__go,
    .appbuild__dismiss { transition: none; }
    .appbuild__go:active { transform: none; }
}