:root {
  --brick-pwa-accent: #ff6f52;
  --brick-pwa-accent-dark: #b83a22;
  --brick-pwa-ink: #171717;
  --brick-pwa-muted: #5f6368;
  --brick-pwa-border: #dedede;
  --brick-pwa-surface: #ffffff;
  --brick-pwa-shadow: 0 0.75rem 2rem rgb(23 23 23 / 12%);
}

#brick-cs-pwa-notices {
  position: fixed;
  z-index: 2147481000;
  top: calc(env(safe-area-inset-top, 0px) + 4.25rem);
  right: max(1rem, env(safe-area-inset-right, 0px));
  display: grid;
  width: min(23rem, calc(100vw - 2rem));
  gap: 0.625rem;
  pointer-events: none;
}

.brick-pwa-notice {
  box-sizing: border-box;
  border: 1px solid var(--brick-pwa-border);
  border-radius: 1rem;
  background: var(--brick-pwa-surface);
  box-shadow: var(--brick-pwa-shadow);
  color: var(--brick-pwa-ink);
  font: 400 0.875rem/1.45 Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: auto;
}

.brick-pwa-notice__body {
  padding: 0.875rem 1rem;
}

.brick-pwa-notice__title {
  margin: 0 2rem 0.25rem 0;
  color: var(--brick-pwa-ink);
  font-size: 1rem;
  font-weight: 700;
}

.brick-pwa-notice__copy {
  margin: 0;
  color: var(--brick-pwa-muted);
}

.brick-pwa-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.brick-pwa-notice button,
.brick-pwa-primary-button,
.brick-pwa-secondary-button {
  box-sizing: border-box;
  min-height: 2.75rem;
  border-radius: 0.625rem;
  font: inherit;
  font-weight: 650;
}

.brick-pwa-notice button {
  cursor: pointer;
}

.brick-pwa-notice__primary,
.brick-pwa-primary-button {
  border: 1px solid var(--brick-pwa-accent-dark);
  background: var(--brick-pwa-accent);
  color: #171717;
  padding: 0.625rem 0.875rem;
}

.brick-pwa-notice__secondary,
.brick-pwa-secondary-button {
  border: 1px solid var(--brick-pwa-border);
  background: #ffffff;
  color: var(--brick-pwa-ink);
  padding: 0.625rem 0.875rem;
  text-decoration: none;
}

.brick-pwa-notice__dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  min-width: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--brick-pwa-muted);
  font-size: 1.25rem;
}

.brick-pwa-install {
  position: relative;
  border-top: 0.25rem solid var(--brick-pwa-accent);
}

.brick-pwa-install__steps {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  color: var(--brick-pwa-muted);
}

.brick-pwa-install__steps li + li {
  margin-top: 0.375rem;
}

.brick-pwa-connectivity[data-state="offline"] {
  border-color: rgb(255 111 82 / 45%);
}

.brick-pwa-connectivity[data-state="online"] {
  justify-self: end;
  width: max-content;
  max-width: 100%;
  border-color: rgb(24 128 72 / 35%);
  border-left: 0.25rem solid #188048;
  border-radius: 0.75rem;
  box-shadow: 0 0.375rem 1rem rgb(23 23 23 / 10%);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.25rem;
  white-space: nowrap;
}

.brick-pwa-connectivity[data-state="online"] .brick-pwa-notice__body {
  padding: 0.625rem 0.875rem;
}

.brick-pwa-offline-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: max(2rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(2rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgb(255 111 82 / 18%), transparent 42%),
    #f7f7f7;
  color: var(--brick-pwa-ink);
  font: 400 1rem/1.55 Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brick-pwa-offline-card {
  width: min(100%, 32rem);
  box-sizing: border-box;
  padding: clamp(1.5rem, 6vw, 3rem);
  border: 1px solid var(--brick-pwa-border);
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: var(--brick-pwa-shadow);
}

.brick-pwa-offline-logo {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
}

.brick-pwa-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--brick-pwa-accent-dark);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brick-pwa-offline-card h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1.05;
}

.brick-pwa-offline-card p {
  margin: 0;
  color: var(--brick-pwa-muted);
}

.brick-pwa-offline-detail {
  margin-top: 1rem !important;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: #f4f4f4;
}

.brick-pwa-offline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

.brick-pwa-primary-button,
.brick-pwa-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.brick-pwa-notice button:focus-visible,
.brick-pwa-primary-button:focus-visible,
.brick-pwa-secondary-button:focus-visible {
  outline: 3px solid #1d5fbf;
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  #brick-cs-pwa-notices {
    top: calc(env(safe-area-inset-top, 0px) + 4rem);
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    width: auto;
  }
}

@media (display-mode: standalone) {
  #brick-cs-pwa-notices {
    top: max(0.75rem, env(safe-area-inset-top, 0px));
  }
}

@media (display-mode: window-controls-overlay) {
  body {
    box-sizing: border-box;
    padding-top: env(titlebar-area-height, 0px) !important;
  }

  #brick-cs-pwa-notices {
    top: calc(env(titlebar-area-height, 0px) + 0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brick-pwa-notice,
  .brick-pwa-offline-card {
    scroll-behavior: auto;
  }
}

@media (prefers-contrast: more) {
  .brick-pwa-notice,
  .brick-pwa-offline-card,
  .brick-pwa-notice__secondary,
  .brick-pwa-secondary-button {
    border-width: 2px;
  }
}