.bi-pwa-update{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40000;box-sizing:border-box;width:min(660px,calc(100% - 32px));display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line,#454846);border-radius:16px;background:var(--surface,#292b2a);color:var(--text,#d9d8d6);box-shadow:0 12px 48px #0004;font:inherit;font-size:14px;animation:bi-pwa-rise .32s cubic-bezier(.2,.8,.2,1) both}
.bi-pwa-update[hidden],.bi-pwa-install[hidden]{display:none!important}
.bi-pwa-update-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--actual,var(--accent,#2ed9c3)) 12%,transparent);color:var(--actual,var(--accent,#2ed9c3))}
.bi-pwa-update svg,.bi-pwa-install svg{width:20px;height:20px}
.bi-pwa-update-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}.bi-pwa-update-text strong{font-size:15px;font-weight:600}.bi-pwa-update-text>span{font-size:12px;color:var(--muted,#a7a8a9)}
.bi-pwa-update-actions{display:flex;gap:8px;flex:none}.bi-pwa-update button{border:1px solid var(--line,#454846);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:13px;padding:9px 13px;cursor:pointer}.bi-pwa-update .bi-pwa-update-now{background:var(--actual,var(--accent,#2ed9c3));border-color:transparent;color:var(--bg,#212322);font-weight:600}
.bi-pwa-update button:focus-visible,.bi-pwa-install:focus-visible{outline:2px solid var(--actual,var(--accent,#2ed9c3));outline-offset:3px}.bi-pwa-update button:disabled{cursor:wait;opacity:.6}
.bi-pwa-install{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:1500;display:flex;align-items:center;gap:8px;border:1px solid var(--line,#454846);border-radius:12px;background:var(--surface,#292b2a);color:var(--text,#d9d8d6);padding:11px 15px;font:inherit;font-size:13px;box-shadow:0 4px 18px #0003;cursor:pointer}
header.bgp-topbar>.bi-pwa-install{position:static;z-index:auto;flex:none;padding:6px 10px;font-size:12px;box-shadow:none;white-space:nowrap}header.bgp-topbar>.bi-pwa-install svg{width:16px;height:16px}
.bi-pwa-install-help{max-width:340px;padding:28px;border:1px solid var(--line,#454846);border-radius:20px;background:var(--surface,#292b2a);color:var(--text,#d9d8d6);font:inherit}.bi-pwa-install-help img{border-radius:14px}.bi-pwa-install-help p{font-size:14px;line-height:1.6}.bi-pwa-install-help button{font:inherit;padding:8px 16px}
.bi-native-offline{max-width:480px;margin:10vh auto;padding:32px;border:1px solid var(--line,#454846);border-radius:20px;background:var(--surface,#292b2a);color:var(--text,#d9d8d6)}.bi-native-offline button{font:inherit}
@keyframes bi-pwa-rise{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:600px){.bi-pwa-update{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));padding:14px;gap:10px;flex-wrap:wrap}.bi-pwa-update-actions{width:100%;justify-content:flex-end}.bi-pwa-update-text strong{font-size:14px}.bi-pwa-install{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.bi-pwa-update{animation:none}}
html[data-pwa-display="standalone"] body{box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

.bi-native-offline{animation:none;opacity:1;transform:none}

/* Beat the prototype's #bgp-sales button { color: inherit } with a paired fill/ink. */
#bgp-sales .bi-pwa-update .bi-pwa-update-now{background:var(--button-primary-bg);color:var(--button-on-primary);border-color:transparent}
#bgp-sales .bi-pwa-update .bi-pwa-update-now:is(:hover,:focus-visible,:disabled){color:var(--button-on-primary);background:var(--button-primary-bg);opacity:1}

/* Pair the filled action colours explicitly: prototype button inheritance must not win. */
#bgp-sales .bi-pwa-update .bi-pwa-update-now{background:var(--actual);color:var(--bg);opacity:1}
#bgp-sales .bi-pwa-update .bi-pwa-update-now:hover{filter:brightness(.96)}
#bgp-sales .bi-pwa-update button:disabled{opacity:1;border-style:dashed;cursor:wait}

#bgp-sales .bi-pwa-update .bi-pwa-update-now{background:var(--button-primary-bg);color:var(--button-on-primary)}
#bgp-sales .bi-pwa-update .bi-pwa-update-now:is(:hover,:focus-visible,:disabled){background:var(--button-primary-bg);color:var(--button-on-primary);filter:none;opacity:1}

/* Task 259: the stub for a signed-in person without a role */
.bi-no-access h1{margin:6px 0 16px;font-size:24px;line-height:1.2}
.bi-no-access h1+p{margin-top:0}
.bi-no-access p{margin:0 0 10px;line-height:1.45}
.bi-no-access-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.bi-no-access-actions button{min-height:40px;padding:0 16px;border:1px solid var(--line,#454846);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer}
#no-access #no-access-retry{background:var(--actual,#2bbfa4);border-color:transparent;color:#06201b!important;font-weight:600}
#no-access-note{color:var(--secondary,#9a9894);font-size:13px;min-height:1.2em}

/* Task 388: the soft request for notifications on the showcase and the feed. In the flow of the page: it covers nothing and moves the content down. */
.bi-notify-banner{box-sizing:border-box;display:flex;align-items:center;gap:12px 14px;margin:10px 24px 14px;padding:12px 14px;border:1px solid var(--line,#454846);border-radius:12px;background:var(--surface,#292b2a);color:var(--text,#d9d8d6);font:inherit;font-size:13px;line-height:1.4}
.bi-notify-banner[hidden]{display:none!important}
.bi-notify-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--actual,#2ed9c3) 14%,transparent);color:var(--text,#d9d8d6)}
.bi-notify-icon svg{width:20px;height:20px}
.bi-notify-text{display:flex;flex:1 1 220px;min-width:0;flex-direction:column;gap:2px}
.bi-notify-text strong{font-size:14px;font-weight:600}
.bi-notify-text>span{color:var(--secondary,#a7a8a9);overflow-wrap:anywhere}
.bi-notify-actions{display:flex;flex:none;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:100%}
#bgp-sales .bi-notify-banner button{min-height:36px;padding:7px 13px;border:1px solid var(--line,#454846);border-radius:9px;background:transparent;color:var(--text,#d9d8d6);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
#bgp-sales .bi-notify-banner button[hidden]{display:none}
#bgp-sales .bi-notify-banner .bi-notify-on{background:var(--button-primary-bg);border-color:transparent;color:var(--button-on-primary);font-weight:600}
#bgp-sales .bi-notify-banner .bi-notify-on:disabled{opacity:1;border:1px dashed var(--line,#454846);background:transparent;color:var(--text,#d9d8d6);cursor:wait}
#bgp-sales .bi-notify-banner button:focus-visible{outline:2px solid var(--actual,#2ed9c3);outline-offset:2px}
@media(min-width:1100px){.bi-notify-banner{margin-inline:46px}}
@media(max-width:1000px){.bi-notify-banner{flex-wrap:wrap}.bi-notify-text{flex-basis:calc(100% - 50px)}.bi-notify-actions{width:100%}}
@media(max-width:600px){.bi-notify-banner{margin:10px 14px 12px}}