/* "New version available" refresh banner, created by js/app-update.js. Appended to , so it inherits the active design-tokens theme + per-club accent. A bottom-centred toast that slides up; on phones it sits above the fixed bottom tab bar, on desktop it tucks into the corner offset. */ .cm-update-bar { position: fixed; left: 50%; /* Clear the ~74px mobile bottom tab bar + the home-indicator safe area. */ bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); transform: translate(-50%, 220%); z-index: 1000; display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: min(92vw, 440px); padding: 0.7rem 0.75rem 0.7rem 1rem; border-radius: 12px; background: var(--surface-raised, #1d1d1d); color: var(--fg, #fff); border: 1px solid var(--hairline-strong, rgba(127, 127, 127, 0.35)); box-shadow: 0 10px 34px -10px rgba(0, 0, 0, 0.55); font-family: var(--type-body, system-ui, sans-serif); font-size: 0.9rem; line-height: 1.3; /* Hidden until the script adds --in (slide up). Respect reduced-motion. */ transition: transform 280ms ease; } /* Mobile shown-state. Declared BEFORE the desktop @media so the media rules below win on wide screens (equal specificity → later source order). */ .cm-update-bar.cm-update-bar--in { transform: translate(-50%, 0); } @media (min-width: 881px) { .cm-update-bar { left: auto; right: 24px; bottom: 24px; transform: translateX(0) translateY(220%); } .cm-update-bar.cm-update-bar--in { transform: translateX(0) translateY(0); } } @media (prefers-reduced-motion: reduce) { .cm-update-bar { transition: none; } } .cm-update-bar__text { flex: 1 1 auto; } .cm-update-bar__btn { flex: 0 0 auto; padding: 0.4rem 0.9rem; border: none; border-radius: 8px; background: var(--accent, #f5d400); color: var(--accent-fg, #111); font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; } .cm-update-bar__btn:disabled { opacity: 0.7; cursor: default; } .cm-update-bar__close { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--fg-muted, #9a9a9a); font-size: 1.25rem; line-height: 1; cursor: pointer; } .cm-update-bar__close:hover { color: var(--fg, #fff); background: color-mix(in srgb, currentColor 12%, transparent); }